Feuille de style de base

Pour chaque déclaration, la structure est toujours la même :

sélecteur {
propriété: valeur;
}

• Le sélecteur, c'est la balise (x)html (body ; h1 ; p, etc.), l'identifiant (id) ou la classe (class) ;
• La propriété, c'est l'attribut qu'on veut appliquer (font ; background ; margin ; etc.) 
• Et enfin la valeur qui précise les caractéristiques de la propriété

Cet exemple de feuille de style (encore une fois, de base) donnera une page :

• à fond blanc,
• avec une police de caractère par défaut Verdana noire,
• un titre de premier niveau bleu marine centré,
• un titre de deuxième niveau rouge décalé de 15 pixels,
• des liens passant du vert au gris avec un petit effet rouge non souligné au passage de la souris.

A noter que les couleur sont ici sous la forme "white, black, blue" etc... pour plus de lisibilité mais qu'il convient plutôt d'utiliser les valeurs hexadécimales qui vont de #000000 (noir) à #ffffff (blanc)

Les tailles de caractères sont ici exprimées en %, mais on peut aussi utiliser em qui est aussi une unité de longueur relative à privilégier (pour des raisons d'homogénéité d'affichage et d'accessibilité) aux unités absolues telles que les pt ou les pc. A noter que bien que les px soient une unité relative, ils sont aussi à éviter car MSIE les interprète comme unité absolue...

On commence une feuille de style en général par un "reset" pour mettre toutes les marges à zéro (intérieures padding et extérieures margin). Cela doit permettre d'avoir tous les navigateurs avec, à peu près, le même état de départ...

Les codes

Code CSS

html, body {
margin: 0;
padding: 0;
}
body {
background-color: white; 
font-family: Verdana, sans-serif; 
font-size: 100%;
}
h1 {
font-size: 200%; 
color: navy; 
text-align: center;
}
h2 {
font-size: 150%; 
color: red; 
padding-left: 15px;
}
p,ul,li,td {
color: black; 
}
a {
color: green;
text-decoration: underline;
}
a:visited {
color: gray;
}
a:hover {
color: red;
text-decoration: none;
}

Code (x)html

<h1>Titre principal</h1>

<h2>Sous titre</h2>

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Duis eget ligula quis libero mollis dapibus.
Suspendisse potenti. Nullam facilisis neque et sem. 
Proin placerat adipiscing urna. Aenean sollicitudin. 
Mauris lorem erat, fringilla quis, sagittis a, varius sed, nunc. 
Pellentesque ligula. Nullam egestas eleifend turpis. Vivamus ac
sapien. Sed venenatis, ligula ut scelerisque vehicula, 
erat tellus euismod ipsum, eget faucibus tortor arcu et lectus.
Vivamus vel purus. Fusce dignissim tortor quis diam elementum fermentum. 
Mauris eleifend lorem vel arcu. Vivamus tempus
faucibus lectus. Curabitur volutpat ornare mi. 
Curabitur ac libero. Sed eu elit ac metus egestas iaculis.
</p>

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

<p><a href="http://css.mammoutland.net/">css.mammoutland.net/</a></p>

Voir le résultat

Haut

Notion de cascades

Pourquoi parle-le-t'on de "feuilles de style en cascade" ? La raison est très simple : on peut déclarer les styles à différents endroits, et selon ces endroits ils seront plus ou moins prioritaires. On obtient donc une cascade de styles.

• Déclaration des styles dans une feuille de style externe : c'est de loin la meilleure chose à faire et la plus pratique à maintenir (cf le schéma de la page d'accueil), mais c'est celle qui a le moins de poids
• Déclaration des styles dans l'en-tête de la page : à ne faire qu'avec des styles particuliers à une page. Les styles déclarés auront plus de poids que ceux de la feuille de style externe et donc l'emporteront en cas de conflits.
• Déclaration des styles dans les attributs des éléments html : à faire pour des mises en forme ponctuelles. Ces styles l'emporteront sur tous les autres.

... Il y a une 4^ème possibilité, mais celle-ci est indépendante de la volonté du webmestre : ce sont les styles définis par l'utilisateur, s'il jamais il en déclare. Ils seront interprétés en priorité, et masqueront tous les autres.

Haut

Enregistrement d'une feuille de style externe

Enregistrer le code CSS dans un fichier s'appelant (par exemple) "style.css", et mettre dans l'en-tête de la page html (entre les balises <head></head>) :

<link href="style.css" rel="stylesheet" media="all" type="text/css"> 

Pour éviter les mauvaises surprises avec quelques navigateurs antédiluviens on peut aussi à la place (cette option désactive la feuille de style avec ces navigateurs) :

<style type="text/css" media="all">@import "style.css";</style>

Le tour est joué !

Si vous désirez générer simplement une feuille de style un peu plus fournie, un générateur de feuille de style est à disposition.

Note à propos du média

Il est précisé media="all" dans les attributs de la balise style. Cela indique que cette feuille ne sera lisible par tous les types de médias (écrans, TV, imprimante...). Pour une feuille de style lisible seulement avec des écrans, on spécifiera media="screen", pour une feuille de style réservée à l'impression, ce sera media="print".
Pour plus de détails sur tous les médias déclarables, consultez ces spécifications CSS 2.1 sur les types de médias reconnus.

Haut

Lectures complémentaires

• Une feuille de style de base pour bien démarrer vos projets (Alsacreations)
• Une feuille de style pour l'impression (OpenWeb)

Haut