Fiche CSS : Les feuilles de style

Objet de la fiche

État de la fiche

Plan de la fiche

• | Avant propos |
• | Avantages |
• | Principe |
• | Feuilles de style internes |
• | Style en ligne |
• | Feuille de styles centralisés sur fichier externe |
• | Types de média |
• | Relier les propriétés de style à l'élément HTML |
• | Regroupement de classes ou d'informations de style, cascade de classes |
• | Sélecteurs contextuels |
• | Priorités des règles |
• | Les pseudo classes |
• | Les pseudo éléments |
• | Les bonnes habitudes |
• | Application au projet de site web |

Avant propos

Généralités

CSS pour Cascading StyleSheets

Une feuille de style est un ensemble de règles pour personnaliser l'apparence des éléments d'une page Internet.

Si on considère que le contenu  d'une balise constitue un 'objet' de type texte et/ou image, et/ou formulaire, et/ou tableau etc., les feuilles de style vont s'appliquer sur ces 'objets" par l'intermédiaire de propriété et d'attributs  pour en personnaliser l'apparence : style des textes, bordures, couleurs, tailles et dimensions. Par exemple si on applique une feuille sur le contenu de la balise body (balise constituant le corps du document, donc pour l'ensemble des informations visibles de la page HTML), les personnalisations définies dans la feuille de style s'appliqueront de base à l'ensemble du document, jusqu'à ce qu'une autre feuille ou règle de style appliquée à un autre 'objet' de la page HTML ne vienne se substituer aux spécification de base.

Trois séries de styles CSS d'origines différentes sont susceptibles d'être concurrentes ou combinées pour un même élément (X)HTML. Les feuilles de style ont trois origines différentes :

• l'auteur : celui qui conçoit la page Internet. C'est ce point sur lequel nous allons principalement travailler.
• l'utilisateur : qui peut par paramétrage de son navigateur, substituer les paramètres des polices et des couleurs des sites Web.
• le navigateur qui possède ses propres styles par défaut.

Les champs d'action de ces trois feuilles de style vont se recouper, leur interaction dépendant des règles de la cascade.

La cascade de CSS (le cascading de css) définit un ordre de priorité, ou poids, pour chaque règle de style. Quand plusieurs règles sont mises en oeuvre, celle avec le plus grand poids a la préséance.

Il est très important de comprendre le mécanisme d'utilisation des feuilles de style car c'est l'architecture des fichiers Internet de demain, alors autant bien maîtriser le sujet et surtout prendre les bonnes habitudes dés le départ.

Contenu de la section CSS

Avantages

Le but principal est de séparer autant que possible le contenu lui même de sa mise en forme mais aussi de préparer le site à l'évolution actuelle (XHTML certification W3C) qui tend à supprimer les balises de style du corps du document.

HTML ne décrit que l'architecture interne, et CSS décrit tous les aspects de la présentation. CSS peut définir couleur, police, alignement de texte, taille, position etc.

• La structure du document et la présentation peuvent être gérées dans des fichiers séparés.
• La conception d'un document se fait dans un premier temps sans se soucier de la présentation, ce qui permet d'être plus efficace.
• Évolutions du site, modifications d'apparences et maintenance plus faciles. Par exemple on peut changer la charte graphique de tout un site (comportant des centaines de pages) par la modification d'un seul fichier sans avoir à modifier individuellement chaque page.
• Chargement plus rapide de la page : au lieu de répéter les attributs tout au long du document , ceux ci sont définis une seule fois pour toute .
• Force les designers de site web à respecter une certaine homogénéité.
• Utilisation impérative pour être valide XHTML. par le W3C et assurer la pérennité du site.

Principe général des feuilles de style gérées par l'auteur des documents HTML

La déclaration des feuilles de style gérée par les auteurs de page HTML peut se faire à partir de 3 niveaux :

• les feuilles de style externes qui peuvent s'appliquer à plusieurs pages HTML voir à l'ensemble du site.
• les feuilles de style interne qui définissent des règles propre à la page dans laquelle elles sont définies.
• Les styles en ligne qui s'appliquent ponctuellement sur un élément.

La bonne méthode est tout d'abord de définir des règles de style pour l'ensemble du site (1). Par exemple on pourra définir les caractères de base en police 'arial' de couleur noire et de taille de 12 pixels , les liens hypertexte présents de couleur bleue avec soulignement lorsqu'ils sont survolés et tous les tableaux  en bordures apparentes de couleur grise. Ces règles communes à l'ensemble du site sont rassemblées dans un fichier externe implanté au niveau de chaque page. Ainsi si on désire changer la taille des caractères, une seule modification et tout le site disposera de la nouvelle taille de caractère.

On peut avoir besoin sur certaines pages et pas sur d'autres d'appliquer des styles spécifiques (2), par exemple afin de mettre en évidence des parties d'une page particulière on définira des feuilles de styles internes.

Si sur un élément très particulier comme par exemple une partie de texte en sur lignage  de couleur bleue avec caractères blancs on utilisera le style en ligne (3).

Les feuilles de style (1) et (2) sont déclarées entre les balises <head> et </head> du document HTML. Les styles en lignes sont applicables aux diverses balises elles mêmes comprises entre les balises <body> et </body>.

Du point de vue de l'ordre d'application des règles une bonne habitude est à retenir  : c'est la dernière règle lue qui est prioritaire  et s'applique.  On trouvera des précisions sur ce point dans le chapitre Priorités des règles.

Feuilles de style internes (entre les balises <head> et </head>)

Syntaxe de définition des règles de style internes :

Attributs

Exemple

Pour illustrer le propos nous allons prendre un exemple avec le sélecteur <p> qui est une balise de paragraphe et nous allons lui appliquer une couleur  et une police de texte. Le but de l'exemple est simplement de montrer le mécanisme de gestion séparée entre la structure du document et la présentation.

Cet exemple montre comment affecter au contenu de la balise <p> (et chaque fois qu'elle est utilisée dans le document) une police de texte de type Times New Roman, en italique, et de couleur rouge. En l'absence de la feuille de style nous obtiendrions une présentation de texte par défaut  (définie de base dans les navigateurs).

Point important

Hormis la syntaxe du sélecteur (p dans l'exemple), le mode de déclaration des autres éléments suivra toujours le même principe. Veillez à bien respecter la syntaxe pour les feuilles de style:

• pas de signe <> entourant le sélecteur car il s'agit la du nom et non pas de la balise HTML du corps du document.
• respectez un espace après {  
• pas d'espace entre fin de propriété et :
• un espace après ;
• un espace avant }

Feuilles de style en ligne

Les règles de style s'appliquent directement au niveau de chaque élément en utilisant l'attribut style.

Syntaxe de définition des règles de style en ligne

Exemple

Pour illustrer le propos nous allons prendre 2 paragraphes. Le premier classique utilisant les styles par défaut du navigateur et un second avec le même contenu mais sur lequel nous allons appliquer un style spécifique : caractères bleu, de grande taille, en italique gras et souligné.

Feuilles de styles centralisées sur fichiers externes

Généralités

Dans des pages HTML importantes les règles de style et les classes peuvent être très longues. De plus  pour avoir une homogénéité du site il est fortement souhaitable que ces règles et classes soient reconduites sur les autres pages. Il y a la possibilité de les recopier sur chacune des pages du site mais si on veut modifier un élément il faudra le modifier sur toutes les autres pages : pas très pratique.

Une autre méthode consiste à placer les règles et les classes dans un fichier séparé qui porte l'extension .css . Ce fichier peut être construit et édité à l'aide du même éditeur Bloc Notes qui nous a servi jusqu'à maintenant pour construire la page HTML de projet.

Ce fichier sera chargé automatiquement lors du chargement de la page et pour cela il faut placer le code suivant entre les balises <head> et </head>

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

Contenu du fichier

Le fichier externe est un fichier texte contenant des règles de style définies de la même manière que pour les règles internes. Une seule différence : on ne doit pas définir les balises d'encadrement <style type="text/css"> et </style>.

Exemple

Fichier externe   MonFichier.css dont le contenu est le suivant :

 p { font-family: Times New Roman; font-style: italic; color: red; }
 table {  color: yellow;background-color:back }

L'intégration dans la page HTML prendra la forme suivante

Nota : les 2 modes (style externe et style interne) peuvent cohabiter comme on peut le voir ci dessous. On peut ranger les règles et classes communes à plusieurs pages dans un fichier externe et conserver dans la page elle même des règles et classes spécifiques à cette page.

Intégrer les feuilles de style externes

La règle @import

À l'intérieur de la balise <style> - ou d'une feuille de style CSS externe -, on peut employer la règle @import un peu comme on se sert de la balise <link>. Cette directive permet encore là d'inclure une feuille de style CSS externe au document. Les règles @import doivent précéder toutes autres règles dans la feuille de style
Le syntaxe générale est @import url(feuille2.css) Type de Média (voir le tableau ci-dessous)

@import url(feuille2.css) media    : média est optionnel et égal à all par défaut.
<style type="text/css">
@import url(style.css) screen; /* l'importation arrive en premier */
h1 {color: grey;};
</style>

Plusieurs directives @import peuvent être utilisées pour charger et combiner plusieurs feuilles de style. Cela peut être utile pour séparer les règles CSS concernant la typographie, les couleurs, la mise en page, etc.

@import peut être extrêmement utile dans une feuille de style externe qui nécessite certains styles que l'on trouve dans une autre feuille de style externe. Comme les feuilles de style externes ne peuvent utilisées la balise <link>, la directive @import est la seule alternative.

@import url(http://exemple.org/lib/typo.css);
@import url(layout.css);
@import url(impression.css) print;
body {color: blue;}
h1 {color: red;}

La directive link

Généralités

L'écran et l'imprimante par exemple sont des modes de sortie très différents pour des données structurées agréablement. Ces deux modes de sortie ont leurs propres règles. Pendant qu'à l'écran des écritures claires auront belle allure sur des fonds sombres, ce n'est pas une bonne solution pour la sortie à l'imprimante. Pour la sortie à l'imprimante, des retraits de paragraphes d'au moins 2cm auront meilleur aspect, alors que par les mentions correspondantes le précieux espace d'affichage à l'écran sera peut être gaspillé. C'est pourquoi, vous pouvez incorporer différents fichiers de feuilles de style pour les différents modes de sortie, qui peuvent contenir des définitions de formats différentes. Le logiciel doit décider lors de la présentation des pages quel fichier CSS incorporé est déterminant. Si le navigateur Web par exemple affiche les pages à l'écran, il doit utiliser le fichier CSS qui fixe expressément l'"écran" comme mode de sortie, et si l'utilisateur imprime une page, le navigateur doit employer à la place le fichier CSS que vous mentionnez pour le mode "imprimante".

<link rel="stylesheet" media="screen" href="screen.css">
<link rel="stylesheet" media="print" href="impression.css">
<link rel="stylesheet" media="all" href="commun.css">

Fonctionnement détaillée de la directive <link>

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

Le but premier de cet élément HTML est de lier tout document externe au document (X)HTML contenant la balise <link>. CSS utilise cet élément pour lier une feuille de style externe à un document XHTML.

Afin de fonctionner correctement, la balise <link> doit être placée dans l'en-tête du document - c'est-à-dire à l'intérieur de la balise <head>.

Une feuille de style CSS externe est un document portant l'extension .css. C'est un document contenant uniquement des règles CSS.

Les attributs de la balise <link> sont relativement simples à comprendre :

rel : indique la relation qu'entretient le document (X)HTML au document lié. Dans le cas d'une feuille de style, nous entrerons toujours stylesheet

type : indique le type de données à charger, toujours text/css.
href : permet d'entrer l'URL du fichier à charger.
media : permet d'indiquer à quel média s'adresse la feuille de style (print, screen etc ou all). Notez qu'il est possible d'utiliser plusieurs feuilles de style à la fois dans un même document, en utilisant plusieurs balises <link>.

Déclaration d'URL dans une feuille de style externe

Soit l'exemple suivant : votre page html se trouve dans le répertoire (1). Cette page HTML inclut une feuille de style externe localisée dans le répertoire (2), et certains éléments de cette  feuille de style font appel à des images (par exemple d'arrière plan) se trouvant dans le répertoire (3).

Insertion de la feuille de style externe dans la page HTML :

<link rel="stylesheet" type="text/css" href="(2)/MonFichier.css">

Exemple de contenu de la feuille de style externe :

 p { font-family: Times New Roman; font-style: italic; color: red; }

body{background-image:url('(3)/MonImageArrièrePlan')}

On remarque que la déclaration de l'image (3)/MonImageArrièrePlan est faite par rapport à l'emplacement de la feuille de style elle même et non pas par rapport à l'emplacement de la page HTML qui contient la feuille de style externe.

Types de Média

Les feuilles de style permettent de pouvoir spécifier comment représenter un document pour différents médias : écran, impression, synthétiseur de parole, appareil braille, etc.

 Par exemple, le style de taille de caractères joue un rôle aussi bien dans le rendu sur écran que lors de l'impression d'une page. Ces deux médias sont suffisamment dissemblables pour nécessiter des valeurs particulières pour cette même propriété ; le rendu d'un document sur un écran demande une plus grande taille de police que sur une feuille de papier. Il en est de même pour les caractères dont certains types ont une plus grande lisibilité à l'écran qu'à l'impression. Il faut donc pouvoir spécifier qu'une feuille de style est active pour tel ou tel média.

Syntaxes

@import url(impression.css) print;

<link rel="stylesheet" type="text/css" href="MonFichier.css" média="screen">

<style type="text/css" media="braille">
---- feuille de style -----
</style>

Média

Exemple

Cliquez sur le bouton "le résultat" ci dessous, vous obtenez une page web (popup) présentant du texte de couleur verte. Faite Fichier puis Aperçu avant impression comme indiqué ci contre et vous constaterez que le texte à imprimer est en italique et de couleur rouge. Lors de  l'affichage de la page sur l'écran le navigateur utilise la feuille de style avec le media="screen", et utilise la feuille de style avec le media print lorsque la commande vient d'une demande d'impression. Ainsi les feuilles de style offrent elles la possibilité d'incorporer différents fichiers de feuilles de style pour les différents modes de sortie, ces fichiers contenant habituellement des définitions de formats différentes, et le navigateur décide lors de la présentation des pages quel fichier CSS incorporé est déterminant.

Comment relier les propriétés de style internes ou externes à l'élément HTML sur lequel on désire qu'elles s'appliquent ?

Par une règle de style

Une règle de style comporte une même feuille de style pour toutes les sélecteurs de même nom.

Pour relier une balise à une feuille de style il suffit de déclarer dans la feuille de style pour le nom de la balise considérée (<p> dans l'exemple)  les propriétés que l'on veut définir pour cette balise sous la forme :
p { propriété1: valeur; propriété2: valeur ;}. Les propriétés de style appliquées seront valides pour toutes les balises p du document.

Par le sélecteur CLASS

Il peut s'avérer intéressant d'affecter des styles différents à des sélecteurs de même nom. Pour cela les spécifications CSS ont introduit le concept de classe.

On distingue 2 types de classe :

Par des classes directement liées aux balises.

La définition des classes est identique  à celles des styles, seule la syntaxe de définition du sélecteur (balise) est différente. Elle consiste à préciser la balise sélectionnée (comme pour une déclaration de style), puis de lui ajouter un point (.) et le nom que l'on souhaite donner à la classe. Le nom de la classe peut-être composé de lettres (accentuées ou non), de chiffres et de tirets.

<style type="text/css">
/*Commentaires Blabla .... */
          p.Style1 { propriété 1: valeur; propriété 2: valeur}
          p.Style2 { propriété 1: valeur; propriété 2: valeur}
</style>

et dans le corps du document
   <p class="Style1">.....Paragraphe 1.....</p>
   <p class="Style2">.....Paragraphe 2.....</p>

Application de la notion de classe à une même balise

Remarques sur le code

3 règles de style sont définies dans cet exemple :

1. Une règle de  style générale applicable à toutes les balises p du document :
p {font-style: normal; color: green; font-family: Arial;}
2. Une classe de style  style1 uniquement disponible pour les balises p disposant de la classe style1 :
p.style1{ font-style: italic; color:blue ;font-family: Times New Roman;}
3. Une classe de style   style2 uniquement disponible pour les balises p disposant de la classe style2 :
p.style2{ color:red ;font-family: Courrier;}

Pour appliquer une classe dans le code HTML, il suffit de rajouter un attribut class à la balise :

<p class="style1">paragraphe 1 avec la classe style1</p>
<p class="style2">paragraphe 2 avec la classe style2</p>
<p>paragraphe 3 avec la classe générale des balises p</p>

Le paragraphe 1 va utilisé le style défini par p.style1 de la feuille de style
Le paragraphe 2 va utilisé le style défini par p.style2 de la feuille de style
Le paragraphe 3 ne possédant aucune classe va utiliser automatiquement la règle de style générale applicable à toutes les balise p du document.

Des classes dites universelles :

Il est possible de ne pas préciser de nom de balise. Dans ce cas la classe pourra être utilisée dans n'importe quelle balise pour laquelle le style sélectionné a un sens ! On parle alors de classe universelle (parfois classe indépendante). La définition d'une telle classe se fait en précédant tout simplement le nom de la classe d'un point sans préciser de balise quelconque.

<style type="text/css">
/*Commentaires Blabla .... */
          .MonStyle { propriété 1: valeur; propriété 2: valeur}
</style>

et dans le corps du document

   <p class="MonStyle">.....Paragraphe 1.....</p>
   <h2 class="MonStyle">.....Titre.....</h2>

Application de la notion de classe dite universelle

Remarques sur le code

Dans la déclaration de style ce n'est plus un nom de balise qui apparaît mais un nom de classe précédé d'un point. Attention dans le corps du document class="MonStyle" il n'y a pas de point avant MonStyle.

Dans le corps du document on remarque que class (des balises p et h2) fait appel au même nom de style (.MonStyle) .

Par le sélecteur id

Le principe général est strictement identique en terme de contenu des styles au principe exposé dans le paragraphe précédent  'sélecteur CLASS' , sauf que le style ne va plus être relié par l'attribut class mais par l'attribut id. Cet attribut  est permis sur tout élément et sa valeur doit absolument être unique au sein d'un document.

Syntaxe coté corps du document

<p id="MonIdentificateur">.........</p>

et coté feuille de style

<style type="text/css">
          #MonIdentificateur{ propriété 1: valeur; propriété 2: valeur}
</style>

On notera le # utilisé pour les liaisons aux attributs id (à la place de . pour les liaisons aux attributs class).

Pas de doublons de valeurs permis. Faites bien attention si vous utilisez l'attribut id.

Par des combinaisons classes / sélecteurs / balises

Ce mode de syntaxe  en cascade permet d'atteindre finement l'élément ou le groupe d'éléments auquel on veut affecter un style.

Exemple

<style style="text/css" media="screen">   #MonIdentificateur td {color:green;}   #MonIdentificateur td.MaClasse1 {font-size:3em;font-style:italic}   #MonIdentificateur td a {color:red;text-decoration:underline;font-size:2em;font-style:italic} </style>
<body> <table id="MonIdentificateur"> <tr> <td class="MaClasse1">Hello</td> <td>Bonjour</td> </tr> <tr> <td colspan="2"><a title="test" href="#" > Voici Mon lien</a></td> </tr> </table> <a title="test" href="#" > et mon autre lien</a> </body>

Commentaires

De base toutes les cellules (td) de l'élément identifié par id="MonIdentificateur"  (table) contiendront du texte de couleur verte en gras (#MonIdentificateur td {...} ).

Pour affecter spécifiquement un style à une ou des cellules (td) de la table identifiée par id="MonIdentificateur" on peut rajouter une classe spéciale : #MonIdentificateur td.MaClasse1 {...}.  De la même façon pour attribuer des styles particuliers à des éléments (a) et cela uniquement pour les cellules de cette table, la syntaxe du sélecteur sera #MonIdentificateur td a {....}.

Regroupement de classes ou d'informations de style, cascade de classes

Regroupement de classes ou d'informations de style

Imaginons la feuille de style suivante définissant trois classes universelles, .Monstyle1 , .Monstyle2 et .Monstyle3 qui ne diffèrent l'une de l'autre que par quelques propriétés (color dans cet exemple).

Il est possible de regrouper ces informations de la manière suivante.

Cela est intéressant dans le cas ou vous avez des classes avec beaucoup de propriétés mais très proches entres elles.

Cascade de classes sur un élément

Cette construction reduit la complexité d'écriture.

Imaginons le cas d'un cube dont chaques faces ont les mêmes caractéristiques principales mais diffèrent par leurs couleurs. On va faire la déclaration de style suivante.

et la déclaration html suivante

La classe "cotes" suivie de la classe "cX" sont aplliquées aux éléments <div> à l'aide de la syntaxe class="cotes cX"

Sélecteurs contextuels

On peut appliquer un style à un attribut dans un contexte donné, c'est-à-dire en fonction des éléments qui l'entourent grâce à des sélecteurs contextuels.

Soit la construction HTML suivante qui va nous servir de base:

<p><i> Nota : </i>Cette section est <b>très importante</b> et son assimilation <b><i>nécessaire</i></b> pour la suite du programme.</p>
<b> Soyez très attentif </b>

qui donne le résultat suivant 

Sélecteur descendant

Cette syntaxe permet de créer une règle ne s'appliquant que lorsque un élément  est imbriqué dans un  autre élément, pouvant lui même être imbriqué.

La règle de style suivante met en gras et en rouge les contenus encadrés par une balise b, elle même inclue dans une balise p

p b { font-weight: bold; color: red; }

Ce qui donne le résultat ci contre
Nota :Soyez très attentif n'est pas concerné car bien qu'encadré par une balise b, cette dernière n'est pas encadré par une balise p

Une syntaxe de règle de style type table td p a appliquera la règle uniquement au contenu de  tous les éléments a faisant partie d'un paragraphe p, à l'intérieur de la cellule d'une table.

Sélecteur adjacent +

Cette syntaxe permet de créer une règle ne s'appliquant que lorsque un élément  suit immédiatement un autre élément (consécutif).

La règle suivante ne sélectionne que les mots « très importante » premier contenu encadré par la balise b, suivant immédiatement  un contenu encadré par une balise i.

i + b { font-weight: bold; color: red; }

Sélecteur d'enfant >

Cette syntaxe permet de créer une règle ne s'appliquant que lorsque un élément Y est fils direct d'un élément X.
La règle suivante ne sélectionne que le mot «nécessaire» qui est  le seul entouré de balises i, directement imbriquées dans une balise b).

b > i { font-weight: bold; color: red; }

Si la règle de style devient
p > i { font-weight: bold; color: red; }
Alors uniquement le texte Nota sera concerné : contenu encadré par la balise i suivante immédiate d'une balise p

Sélecteurs d'attribut

Les sélecteurs d'attribut ciblent les éléments en fonction de la présence d'attributs ou de leurs valeurs. Il existe quatre types de correspondance possibles :

[att] : Correspond à tout élément ayant un attribut att, quelle que soit sa valeur.
[att=val] : Correspond à tout élément dont l'attribut att contient exactement la valeur val.
[att~=val] : Correspond à tout élément dont l'attribut att contient une liste de valeurs séparées par des espaces et dont l'une d'elles est val. val ne peut alors contenir d'espaces.
[att|=val] : Correspond à tout élément dont l'attribut att contient une liste de valeurs séparées par des tirets débutant par val. L'usage principal concerne les codes de langue spécifiés par l'attribut lang (xml:lang en XHTML), par exemple "en", "en-us", "en-gb", etc.

Exemples

• p[title] {color:#F00;} s'applique pour tous les éléments p qui ont un attribut title, quelle que soit sa valeur.
• div[class=toto] {color:#F00;} s'applique pour tous les éléments div qui ont un attribut class dont la valeur est toto.
• td[headers~=col1] {color:#F00;} s'applique pour tous les éléments td dont l'attribut headers contient la valeur col1.

Priorités des règles

Valeur ! important ou ! important

p { color: red ! important ; }

Quand figure des déclarations avec " ! important ", elles surclassent les déclarations normales. Cette valeur apparaît en fin de déclaration du style du sélecteur.

Priorités et conflits

Les styles auteur, utilisateur et navigateurs ont des poids différents, qui dépendent de l'utilisation éventuelle de la propriété !important. Du plus faible au plus fort on trouve :

• Les styles par défaut du navigateur, qui seront écrasés par tous les styles suivants.
• Les styles normaux de l'utilisateur (non marqués !important).
• Les styles normaux de l'auteur (non marqués !important).
• Les styles de l'auteur marqués !important.
• Les styles de l'utilisateur marqués !important, qui écraseront tous les styles précédents.

Si des conflits de style ne peuvent être résolus,  le résultat final du tri est dicté par l’ordre linéaire que le navigateur donne aux règles de style.

Généralement, quand 2 règles ou davantage sont équivalentes, celle lue en dernier gagne.

Mais qu’en est-il des styles importés ? Comment un navigateur détermine dans quel ordre les appliquer ? Et bien les styles @importés sont toujours appelées depuis une feuille de style externe ou interne, donc les styles @importés sont toujours traités comme partie intégrale de la feuille qui l’appelle.

D’après la spécification : La règle '@import' permet aux utilisateurs l'importation de règles de style à partir d'une autre feuille de style. Les règles @import doivent précéder toutes autres règles dans la feuille de style.

<style type="text/css">
@import url(extra.css);
body {color: blue; }
p {color: green; }
</style>Pour les feuilles de style auteur, l’ordre de lecture est le suivant :

les fichiers externes sont lus en premier (dans l’ordre dans lequel ils sont appelés, en commençant par les styles @importés),
ensuite les styles internes si on considère qu’ils sont déclarés après les styles externes (en commençant par les styles @importés s’il y en a),
enfin les styles en-ligne sont lus en dernier.

Cela signifie que les styles en-ligne prennent le dessus sur tous les autre styles sauf sur ceux qui ont le mot-clef !important.

Si une feuille de style externe est appelée après une feuille de style interne, alors les règles de la feuille de style externe prennent le dessus sur celles de la feuille interne. Ce qui compte réellement est l’ordre d’apparition des différentes feuilles de style auteur dans le code source (X)HTML.

La feuille de style par défaut du navigateur arrive toujours avant toutes les autres feuilles de style.

Quand le navigateur a lu toutes les feuilles de style et que 2 règles ou plus sont en conflit, celle lue en dernier par le navigateur gagne, en considérant que les poids sont égaux.

Pour simplifier

 La dernière règle lue est prioritaire

sachant que :

• La syntaxe en ligne est prioritaire sur la syntaxe interne et externe.
• Entre interne et externe, priorité à la règle déclarée en dernier. en cas de conflit  l'interne est prioritaire sur l'externe.

Les pseudo-classes

Les pseudo-classes permettent d'affiner le style appliqué à un certain nombre de balises en définissant une réaction à un événement ou bien à la position relative de la balise au sein des autres balises. Nous ne retiendrons ici que les pseudo-classes les plus usuelles et intéressantes pour nous.

Contrairement aux classes, le nom des pseudo-classes est prédéfini, il n'est donc pas possible de créer ses propres pseudo-classes.

Les pseudo-classes dynamiques

Les pseudo-classes dynamiques permettent de modifier le style d'une balise en fonction d'un événement (mouvement de la souris, clic, ou bien appui sur une touche du clavier). Il en existe trois:
1. La pseudo-classe :hover permet d'affecter un style à la balise sélectionnée lors d'un survol par le curseur de la souris.
2.La pseudo-classe :focus permet de définir un style à la balise sélectionnée lorsque le focus lui est donné (par exemple lors d'un clic dans un élément de formulaire).
3.La pseudo-classe :active permet de définir un style à la balise sélectionnée lorsque l'utilisateur clique sur l'élément (entre le moment où l'utilisateur clique sur le bouton de la souris et celui où il le relâche). 

Nota : Les pseudo-classes dynamiques ne sont pas reconnues de la même façon par tous les navigateurs, donc attention aux surprises. Les déclarations peuvent être de type Règles de style (même style pour toutes les balises <a> du document ou de type sélecteur class (style personnalisé par balise <a>) (voir le paragraphe précédent "Comment relier les propriétés de style à l'élément HTML sur lequel on désire qu'elles s'appliquent."

Les pseudo-classes de lien

Les pseudos-classes de lien sont des pseudo-classes spécifiques à la balise <a> :

1.La pseudo-classe :link permet de définir le style des liens hypertextes n'ayant pas encore été consultés par le client.
2.La pseudo-classe :visited permet de définir le style des liens hypertextes que le client a déjà visités
Il est possible que certains navigateurs considèrent un lien comme n'ayant pas été visité s'il n'est pas consulté pendant une longue période de temps.

Les pseudo-classes de texte

Les pseudo-classes de texte permettent d'appliquer un style à une partie du texte délimité par les balises auxquelles elles s'appliquent. Ainsi les pseudo-classes de texte s'utilisent généralement conjointement avec la balise de paragraphe (<P>).

Il existe deux pseudo-classes de texte :

:first-line : permet d'appliquer un style à la première ligne d'un paragraphe. P:first-line { text-transform: uppercase }
:first-letter : permet d'appliquer un style à la première lettre d'un paragraphe afin de produire un effet typographique. L'exemple suivant par exemple double la taille et met en gras la première lettre d'un paragraphe : P:first-letter { font-size: 200%; font-weight: bold; }

Attention à la syntaxe (pour toutes les pseudo-classes) 

Exemples pseudo-classes

Application de la notion de pseudo-classe dynamique  hover , active et first-letter

Les pseudo éléments

Généralités

Les pseudo éléments permettent d'insérer du texte, des images (auxquels ont peut appliquer des styles CSS), avant (avec before) et / ou après (avec after) le contenu d'un élément grâce à l'utilisation de la propriété content et de ses paramètres. Ceci est très utile lorsqu'une information doit être répétée un grand nombre de fois: au lieu de l'insérer un grand nombre de fois et d'augmenter la taille de la page HTML (ce qui a un impact sur le temps de chargement), il est ainsi possible de l'écrire une seule fois dans une feuille de style CSS. Autre chose intéressante est la réalisation d'indexation à l'aide de compteurs disponibles avec la propriété countent. Un bémol avec la propriété content qui n'est pas encore disponible avec Internet Explorer. Le fonctionnement plus détaillé de ce  mécanisme est présenté dans la fiche structuration automatique des pages.

Si votre navigateur le permet vous pouvez observer l'indexation des titres et sous titres sur cette page.

Prendre les bonnes habitudes

Je construis un site homogène. Pour cela :

• J'applique des styles identiques à toutes mes pages HTML en les regroupant dans un ou plusieurs fichiers externes.
• Je prends en compte dés le départ les différents type de média dont j'aurais besoin. Pour cela je crée des fichiers externes par type de média : écran, impression ..

Application au projet de site web

• Création de boites spécifiques (élément <div>) pour la liste et le tableau dans la page index.html. Ces boites nous permettrons de pouvoir séparer ces deux entités et d'appliquer finement les classes indépendamment  les unes des autres. Pour cela :
  • Ouvrez le bloc note,
  • Ouvrez la page index.html
  • Encadrez le titre (Bienvenue sur <b>La Boutique...) par une balise div avec "titreSite" comme identificateur (id).
  • Encadrez la liste de diffusion (avant <p>Choisissez et commandez</p> et aprés </dl>) par une balise div avec "BoiteChoix" comme identificateur (id).
  • Encadrez le tableau (entre <table> et </table>) par une balise div avec "BoiteCatalogue" comme identificateur (id).
  • Sauvegarder la page dans le répertoire  MonSiteWeb.
  • Faites la même chose (uniquement pour le tableau et le titre) pour les pages htm du répertoire Site.
• Appliquez un style externe aux titres du tableau. pour cela :
  • Au niveau du répertoire MonSiteWeb créer le sous répertoire CSS qui contiendra les fichiers externes de feuille de style communs à toutes les pages du site Web.
  • Ouvrez le bloc note,
  • Déclarer la feuille de style permettant de mettre la première lettre des titres du tableau (éléments td) contenu dans la boite "BoiteCatalogue"  à la taille double et de couleur verte . Vous utiliserez first-letter { font-size: 200%; color: green; } déclaré pour les éléments th de "BoiteCatalogue".
  • Sauvegardez ce fichier sous le nom CSSExterneScreen.css (il s'agira du fichier CSS externe lié au média screen) dans le répertoire CSS.
  • Ouvrir le fichier index.html de la racine pour y intégrer le fichier CSSExterneScreen.css associé au média screen. Faire de même avec les fichiers Bouquets.htm, Fleurs.htm, Plantes.htm, Compositions.htm du répertoire Site.
  • Sauvegardez tous ces fichiers.

Retrouvez la solution