Il est possible de styliser les éléments HTML en leur donnant un attribut style, dans lequel des règles de mise en page et d'apparence peuvent être listées.
<p style = "color:red ; font-size:24px" >Paragraphe rouge, de corps 24</p>
Toutefois, il est très largement préférable de conserver une séparation entre structure et présentation, pour des raisons de lisibilité, de maintenance et de volume de données. On définira alors nos règles de mise en page dans un fichier CSS (Cascading Style Sheets ou "Feuilles de style en cascade") à part, relié au document HTML à styliser.
Un fichier CSS doit être appelé en en-tête du document, via une balise link :
<head>
[ . . . ]
<link href = "chemin/vers/style.css" rel = "stylesheet" />
[ . . . ]
</head>
Plusieurs fichiers CSS peuvent être liés à la même page HTML, et évidemment plusieurs pages HTML peuvent faire appel au même fichier CSS.
Le fichier CSS présente une série de règles, visant différents éléments HTML pour en modifier le rendu visuel. Une règle se compose de la manière suivante :
p {
color: red;
font-size: 24px;
}
Ici le sélecteur p indique que la règle concernera les éléments <p></p> présents dans le document. Entre les accolades sont listées des déclarations, séparées par des points-virgules. Une déclaration consiste en un nom de propriété, un double point, et la valeur à donner à cette propriété.
Pour une liste exhaustive des propriétés utilisables, leurs valeurs possibles et leur applicabilité selon le type d'élément ciblé, voir lien ci-dessous.
Pour appliquer une règle à un type d'élément (c'est-à-dire à tous les éléments de ce type présents dans le document), on peut utiliser comme sélecteur le nom de ce type, tel que présent dans la balise HTML correspondante.
Exemple : pour les éléments de type image (balise <img />), le sélecteur CSS sera img.
Pour désigner un élément unique, indépendamment de son type, il est possible de lui attribuer dans le document HTML un identifiant, qui sera utilisable comme sélecteur CSS.
Pour donner un identifiant à un élément HTML, on pourra utiliser sur sa balise (ouvrante) l'attribut id.
<p id = "mon-paragraphe" ></p>
Dans le fichier CSS, on pourra alors désigner cet élément précis en utilisant comme sélecteur la valeur donnée à son attribut id, précédée du signe dièse "#".
#mon-paragraphe { color:red; font-size:24px; }
Un identifiant ne peut pas contenir d'espaces. Et habituellement, on fait en sorte de suivre les spécifications HTML4 le concernant : il ne commencera pas par un chiffre, et ne se composera que de lettres non-accentuées, chiffres, tirets "-" et "_". Il est également sensible à la casse : les identifiants monID et MonId sont par exemple totalement distincts.
Un identifiant est unique ; il ne peut être donné qu'à un seul élément par page HTML.
Pour désigner un ensemble d'éléments, indépendamment de leur type, on utilisera une classe. Elle peut être donnée à un élément via un attribut class :
<p class = "rouge" ></p>
Une classe peut, et c'est son principal intérêt, être donnée à plusieurs éléments. Les classes peuvent également être cumulées pour un même élément, en les renseignant à la suite dans l'attribut, séparées par des espaces.
<p class = "rouge" ></p><p class = "rouge taillemoyenne" ></p>
Un élément peut sans problème cumuler classes et id :
<p id = "mon-paragraphe" class = "rouge" ></p>
Les règles de composition d'un nom de classe sont les mêmes que pour l'identifiant. La différence se fait, concernant le sélecteur CSS, en utilisant un point "." comme premier caractère :
.rouge { color:red; }.taillemoyenne { font-size:24px; }
• Pour cibler plusieurs éléments, indépendamment de leur type ou classe, on peut employer comme sélecteur une liste séparée par des virgules :
#mon-paragraphe , #mon-autre-paragraphe , h1 , .rouge { color:red; }
• Pour prendre en compte les éléments parents lors du ciblage, on peut décrire une imbrication de plusieurs éléments, comme une liste séparée par des espaces, commençant par l'élément le plus à l'extérieur :
main .conteneur p { margin-top:50px; }
Ici on sélectionnera tout paragraphe situé dans un élément de classe "conteneur" lui-même situé dans un élément main. Notons que la descendance décrite n'a pas besoin d'être stricte : le paragraphe peut ne pas se trouver directement dans l'élément de classe "conteneur" mais à un niveau d'imbrication supérieur, idem pour la relation entre le conteneur et l'élément main.
• Un sélecteur peut cumuler des critères, en les accolant :
div#a-propos.visible { visibility:visible; }
Ici on sélectionnera tout élément div portant l'identifiant "a-propos" et la classe "visible".
• Pour prendre en compte l'état d'un élément lors du ciblage, on utilisera les pseudo-classes. Par exemple l'état "survolé par le pointeur" correspondra à la pseudo-classe "hover". Le sélecteur s'écrira :
#mon-element:hover {}
Toutes ces approches peuvent être cumulées dans un seul sélecteur.
nav#menu a.special:hover , p a:hover { background-color:fuchsia; }
Ici on sélectionnera d'une part les liens (éléments a) survolés situés dans un élément nav d'identifiant "menu" et d'autre part les liens survolés situés dans un paragraphe.
Lorsqu'un même élément HTML est ciblé par plusieurs règles CSS, et que celles-ci concernent la même propriété, c'est la règle dont le sélecteur est le plus spécifique qui sera appliquée.
Pour l'élément HTML suivant
<p id = "mon-paragraphe" class = "un-paragraphe">Quelle couleur ?</p>
avec les règles CSS suivantes
p { color:red; }
#mon-paragraphe { color:blue; }
.un-paragraphe { color:yellow; }
le texte contenu dans le paragraphe sera bleu, c'est le sélecteur #mon-paragraphe qui "prend le dessus". En effet, un identifiant est plus spécifique qu'une classe, qui est plus spécifique qu'un type d'élément.
Une combinaison de critères sera également plus spécifique et donc prioritaire :
#mon-paragraphe { color:blue; }
p#mon-paragraphe { color:green; }
Ici le second sélecteur est plus spécifique, le texte contenu dans le paragraphe sera vert.
Localiser l'élément ciblé dans son arborescence apportera encore une spécificité supplémentaire. Si par exemple notre paragraphe est contenu dans un élément div, avec les règles CSS suivantes en compétition :
p#mon-paragraphe { color:green; }
div #mon-paragraphe { color:orange; }
Le texte sera orange car la seconde règle est plus spécifique.
Dans le cas où plusieurs règles sont en compétition, sans possibilité de les départager en termes de priorité, c'est l'ordre dans lequel elles sont déclarées qui déterminera laquelle prendre en compte : chacune annule la précédente, la dernière prendra le dessus.
Si pour un élément HTML, l'attribut style est utilisé (on parle de stylisation en ligne), les règles énoncées dans celui-ci prendront la priorité sur celles provenant d'un fichier CSS, aussi spécifique que soit le sélecteur.
<p id="mon-paragraphe" class="un-paragraphe" style="color:brown"></p>/* CSS : */
body p#mon-paragraphe.un-paragraphe { color:red; }
Ici le texte sera brun, comme spécifié dans l'attribut style.
La seule manière de récupérer, depuis le CSS, la priorité par rapport à une règle de stylisation en ligne est d'utiliser l'expression "!important". Il en découlera également une priorité absolue par rapport à toute règle en compétition dans le CSS :
p { color:red !important; }
body p#mon-paragraphe.un-paragraphe { color:yellow; }
Ici la première règle prendra le dessus.
Attention : cette technique, plutôt considérée comme un "hack", est à éviter autant que possible, tout comme la stylisation en ligne.