Écrire des règles CSS, choisir la bonne façon d'intégrer le CSS, coder les couleurs et les unités, et cibler les éléments avec les sélecteurs simples, complexes et les pseudo-classes.
La page du restaurant La Sardine est complète, mais elle a l'air d'un document Word de 1995 : texte noir sur fond blanc, police par défaut, liens bleus soulignés. Le patron veut les couleurs de la mer, un titre centré et des liens qui changent de couleur au survol. C'est le travail du CSS.
Un même paragraphe est visé par trois règles qui donnent chacune une couleur différente. Laquelle s'applique ?
Le CSS (Cascading Style Sheets) décrit la présentation de la page. Le HTML dit « ceci est un titre », le CSS dit « les titres sont bleus et centrés ».
h1 {
color: #0b5394;
text-align: center;
}
h1 est le sélecteur : il choisit les éléments ;color: #0b5394; est une déclaration : une propriété et sa valeur.| Méthode | Où | Usage |
|---|---|---|
| externe | <link rel="stylesheet" href="style.css"> | la bonne pratique |
| interne | <style> dans le <head> | une page isolée |
| en ligne | attribut style="..." | à éviter |
red (nom) · #c0392b (hexadécimal) · rgb(192, 57, 43) · rgba(0, 0, 0, 0.5) (avec transparence) · hsl(6, 63%, 46%).
| Unité | Signification |
|---|---|
px | pixel, taille fixe |
% | pourcentage du parent |
em | relatif à la taille de police du parent |
rem | relatif à la taille de police de la page (conseillé pour les textes) |
vw, vh | 1 % de la largeur / hauteur de l’écran |
font-family: Arial, sans-serif; · font-size: 1.2rem; · font-weight: bold; · text-align: left | center | right | justify;
| Sélecteur | Cible |
|---|---|
p | toutes les balises p |
.plat | les éléments de classe plat |
#menu | l’élément d’id menu |
nav a | les liens dans nav (descendants) |
ul > li | les li enfants directs de ul |
h2 + p | le p qui suit immédiatement un h2 |
h1, h2 | les h1 et les h2 |
a:hover | un lien survolé (pseudo-classe) |
li:first-child, li:nth-child(2) | le premier, le deuxième élément |
input:focus | le champ actif |
Quand plusieurs règles visent le même élément, la plus spécifique gagne (id > classe > balise). À égalité, c’est la dernière écrite.
Le sélecteur est le pochoir : il choisit quelles parties de la page recevront la peinture. Les déclarations sont la peinture : la couleur, la taille, la police.
h1 { /* sélecteur : tous les h1 */ color: #0b5394; /* propriété : valeur */ text-align: center; }
Une classe, c'est un uniforme : plusieurs éléments peuvent le porter. Un id, c'est un badge nominatif : un seul élément le porte dans la page.
.plat { color: teal; } /* class="plat" : plusieurs */ #menu { background: #eef; } /* id="menu" : un seul */
Que fait cette règle ? nav a:hover { color: white; background: #0b5394; }
Quand la souris survole (:hover) un lien situé dans le <nav>, son texte devient blanc et son fond bleu foncé.
Écrivez la même couleur rouge pour un paragraphe : (1) en style en ligne ; (2) dans une balise <style> ; (3) dans un fichier externe style.css lié à la page. Laquelle préférer ?
1. <p style="color: red;">...</p>
2. <style> p { color: red; } </style> (dans le <head>)
3. <link rel="stylesheet" href="style.css"> + dans style.css : p { color: red; }
On préfère le fichier externe : un seul fichier pour tout le site,
mis en cache par le navigateur.
Écrivez le sélecteur pour : (1) tous les paragraphes ; (2) les éléments de classe prix ; (3) l'élément d'id contact ; (4) les liens dans le footer ; (5) le premier élément d'une liste.
1. p 2. .prix 3. #contact 4. footer a 5. li:first-child