Les feuilles de style

Définition

Une feuille de style est un ensemble de règles s'appliquant à des éléments HTML spécifiques ou à une classe prédéfinie.  On pourra, par exemple spécifier que tous les titres de niveau 4 seront affichés avec une police de caractère de type "courrier new" et en vert.

<style>
H4 { font-family: "courier new"; color: green }
</style>
<H4>Titre de niveau 4</H4>

Titre de niveau 4

ou bien définir une classe avec ses attributs:

<style>
.evidence { font-family: verdana; color: red; text-decoration: underline }
</style>
<SPAN class=evicence>Texte important</SPAN> Texte important

 

Principe des feuilles de style

Le modèle de feuilles de style retenu par le W3C est CSS1 (Cascading Style Sheet, level 1).   Dans ce modèle, les feuilles de style peuvent être réunies en cascade et l'ensemble définira la mise en page du document final.

Les feuilles de style peuvent être adjointes au document de plusieurs façons différentes:

 

Constitution d'une feuille de style

Comme nous l'avons mentionné au début, une feuille de style est un ensemble de directives (ou règles).  Une règle se compose de deux parties:

sélecteur
liste d'éléments, de classes ou d'identificateur sur lesquels s'appliquera la règle.
déclarations
suite de couples "propriété:valeur" séparés par des points-virgule.

 

Les sélecteurs

Une classe permet de regrouper des éléments HTML différents selon des thèmes.

<STYLE type="text/css">
.conseil {color: green}
.utilisation {color: blue}
.avertissement {color: red}
H2.utilisation {font-weight: bolder}
</STYLE>
...
<H2>Mise en marche</H2>
<H2 class=utilisation>Utilisation de l'appareil</H2>
...
<P class=avertissement>Les circuits de haute tension présentent un danger!</P>

Les identificateurs permettent d'effectuer des modifications ponctuelles à une règle générales.

<STYLE type="text/css">
#special {color: yellow}
#warning, H4, .rouge {color: red}
</STYLE>
...
<P ID="special">Les dangers psychologiques du WEB.</P>

Pour contrôler la couleur d'affichage des hyperliens.

<STYLE type="text/css">
A:LINK {color: green}
A:ACTIVE {color: yellow}
A:VISITED {color: maroon}
</STYLE>

Pour tenir compte du contexte dans lequel est utilisé un élément.

<STYLE type="text/css">
DD I {color: green}
P TT {color: red}
UL UL UL I {color: silver}
</STYLE>

 

Les déclarations

Les règles ou directives sont des ensembles de paires "propriété:valeur".   Il existe environ une cinquantaine de propriétés prédéfinies.

 

Les éléments DIV et SPAN

Le conteneur DIV permet de regrouper plusieurs éléments HTML pour lui appliquer un même style tandis que le conteneur SPAN permet, au contraire, d'isoler une partie d'un élément.

<DIV STYLE="margin-left:40"> ... </DIV>
...
<SPAN STYLE="letter-spacing: 0.3em">...</SPAN>

 

L'héritage

Un document HTML peut être considéré comme l'emboîtement de plusieurs éléments.   Les éléments les plus intérieurs hériteront des propriétés des éléments les plus extérieurs.

<style>
.gros {font-size: 120%}
</style>
g<SPAN class=gros>r<SPAN class=gros>o<SPAN class=gros>s </SPAN> </SPAN> </SPAN> gros

Lorsqu'il y a conflit entre deux règles, c'est généralement la plus proche de l'élément qui gagne.  Nous aurons, dans l'ordre:

  1. Règles du navigateur
  2. Règles de l'utilisateur
  3. Règles importées par @import
  4. Règles chargées par LINK
  5. Règles du conteneur <STYLE>..</STYLE>
  6. Règles de l'attribut STYLE

 

Les propriétés de CSS1

Les blocs

Les images

Les couleurs

Le texte

Les polices de caractères

Les listes

Autres

Documentation supplémentaire

Pour ceux qui sont intéressés voici deux autres documents:

Lectures suggérées