Aller aux menus

#CSS {débutant;}

• Premiers pas
• CSS3
• Tutoriels
• Livre
• Boite à Outils

Feuille de style CSS de base

Sommaire

• Structure de base
• Exemple de feuille de style
• Notion de cascades
• Enregistrement de la feuille de style
• Lectures complémentaires

Structure 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é

Exemple de feuille de style

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 des polices de caractère 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.
À noter que bien que les px soient une unité relative, ils sont aussi à éviter car MSIE les interprète comme unité absolue...

Pour que les couleurs des liens changent selon leur état (non visité, visité, survolé, actif, ayant le focus), on utilise des pseudo-classes qui se déclarent par :link, :visited, :hover, :active et :focus. Il est important de respecter cet ordre de déclarations.

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...

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:link {
 color: green;
 text-decoration: underline;
 }
a:visited {
 color: gray;
 }
a:hover {
 color: red;
 text-decoration: none;
}
a:active, a:focus {
 color: red;
}

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-t'on de "feuilles de style en cascade" (Cascading Style Sheets) ? 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.

1. 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
2. Déclaration des styles en interne, 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.
3. Déclaration des styles en 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

Il existe donc trois façons d'enregistrer les styles :

1. dans une feuille de style externe
2. dans une feuille de style interne
3. dans le code au sein des balises html

1. 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"> 

Avec un doctype HTML 5 l'attribut type est inutile.

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 déclaration de la feuille de 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.

2. Feuille de style interne

Pour déclarer des styles qui ne s'appliqueront qu'à la page considérée, les styles sont à déclarer entre les balises suivantes :

<style type="text/css" media="screen">
....
</style>

Tout ceci est à placer, comme précédemment, entre les balises <head></head>.

3. Styles CSS dans le code html ("inline")

De façon encore plus ponctuelle, si l'on veut attribuer un style à un seul endroit, on peut déclarer le style à l'intérieur d'une balise html à l'aide de l'attribut style. Par exemple :

<p style="text-align:center; color:red">
 lorem ipsum
</p>

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