A quoi servent les feuilles de style (CSS) ?

Quelques liens utiles
Informations sur CSS2Débuter avec HTML + CSS un tutoriel destiné à ceux qui commencent à utiliser CSS et n'ont jamais écrit de feuille de style CSS.

Les spécifications CSS2 du W3C.
traductions en français de yoyodesign et d'autres documents du W3C.
Vérifier vos pages
et valider les feuilles de styles
Vérifiez vos pages en les soumettant à des analyseurs de syntaxe : les fautes de frappe sont si faciles à faire... Markup Validation Service (en ligne) ou Total Validator application autonome et extension FireFox
Compatibilité Internet ExplorerCSS3 PIE (Progressive Internet Explorer) fournit un script assurant la compatibilité d'Internet Explorer avec le CSS3.

CSS, un langage de mise en page

CSS décrit la présentation des documents indépendamment du contenu. La couleur du texte d'un paragraphe et sa police, les marges, sont des « attributs de style ».

Le W3C a défini plusieurs versions de CSS (1, 2, 2.1 et 3), avec une complexité fonctionnelle - à mon sens - exagérée : certaines spécifications ne sont pas encore disponibles sur tous les navigateurs, probablement parce qu'elles étaient définies de manière compliquée. Plus gênant notamment, Internet Explorer n'interprète pas les dimensions des objets de la même manière que les autres navigateurs…

Qu'est ce qu'un style ?

Les styles sont des instructions pour afficher les éléments constituant une page HTML : rendu du texte (police, taille, interligne, marges, italiques ou gras, couleurs, etc.), décorations (images de fond, bordures…) et sur le positionnement dans la page.

Où met-on les instructions de style ?

Ces instructions sont regroupées dans des «feuilles de style» :

La cascade des feuilles de style

Il y a plusieurs sources possibles pour les instructions de style : les feuilles externes (on peut en avoir plusieurs), les feuilles internes et les feuilles locales. Le principe est simple : ces feuilles arrivent logiquement les unes après les autres (c'est le sens de l'acronyme anglais CSS : cascading style sheets, feuilles de style en cascade), et c'est la dernière lue qui compte en cas de conflit.

Le navigateur prend en compte successivement :

  1. les feuilles externes (s'il y en a plusieurs, dans l'ordre où elles apparaissent dans la page) ;
  2. les instructions internes ;
  3. les instructions locales

La notion d'héritage

Une page HTML est formée d'une succession de blocs imbriqués les uns dans les autres. Par exemple, le corps de page dans son ensemble, un sous-titre et un paragraphe forment trois blocs différents.

Le style de chaque bloc contient un grand nombre d'informations (police, taille, couleur, interligne, etc.) mais on ne va pas tout redéfinir à chaque fois : le style d'un bloc hérite du style du bloc « parent », et l'on ne précise que ce qui doit changer. Par exemple, la taille de police du paragraphe s'exprimera en pourcentage de celle du corps de document.

Intérêt des feuilles de style CSS

Exemples de différentes feuilles de styles CSS2

Feuille interne :

à placer avant la balise </head> du document HTML

<style type="text/css">
body { background-image: url("imagefond.jpg"); }
p { margin-right: 10mm; margin-left: 10mm; margin-bottom: 1mm; font-weight: bold; font-size: 14px; line-height: 110% }
a { color: royalblue }
</style>

Feuille externe :

à placer avant la balise </head> du document HTML

<link rel=stylesheet type="text/css" href="mafeuilleExt.css">

(url de la feuille, ici au même niveau que le document).

Import d'une feuille externe à l'intérieur d'une feuille interne :

<style type="text/css">
@import url("uneFeuilleExterne.css");
body { background-image: url("imagefond.jpg"); font-family: "Times New Roman",serif }
p { margin-right: 10mm; […]
</style>

« style » à l'intérieur d'une balise :

Se fait en mettant une instruction style="[ensemble de règles CSS]" :

<table style="font:20px Comic Sans Ms; border:none; width:100%;" >
<B style="color:yellow;background-color: red;">texte en gras jaune sur fond rouge</B>

Class ou ID d'un sélecteur :

Un sélecteur est une class s'il commence par un point, une Id s'il commence par un dièse :

<style type="text/css">
.classA { …
#idB { …
.classC { …
#classC { … C'est une ID !
</style>

Dans le codage HTML, on invoque le sélecteur par sa class ou son ID sans indiquer le premier caractère :

<div class="classA"> …</div>
<p ID="idB"> …</p>

Combiner plusieurs classes et ID:

<div class="classA classC"> …</div>
<div class="classA" id="idB"> …</div>

Pseudo-sélecteurs : pseudo-éléments et pseudo-classes.

Le « pseudo-sélecteur » est un suffixe ajouté au nom du sélecteur, séparé de ce dernier par ":" et qui permet de désigner une portion de celui-ci, à laquelle peuvent être attachées des propriétés CSS spécifiques :

Les pseudo-éléments ":before" et ":after" servent à insérer un contenu généré avant ou après celui de l'élément.
Le pseudo-élément ":first-line" produit un style particulier sur la première ligne formatée d'un paragraphe.
Le pseudo-élément ":first-letter" peut être employé pour faire des capitales initiales et des lettrines.
Les pseudo-classes dynamiques : ":hover", ":active" et ":focus" et les pseudo-classes d'ancre : ":link" et ":visited" servent à styler dynamiquement un élément, notamment un lien lorsqu'il est survolé par la souris, sélectionné, visité&