Le maillot du club
Un match commence. Deux équipes entrent sur le terrain. Tu les reconnais tout de suite à la couleur du maillot.
Une page HTML sans style est comme une équipe en maillot blanc : on lit, mais on s’ennuie. Le CSS donne les couleurs et les polices.
Mots-clés
| Mot | Ce que ça veut dire | Exemple |
|---|---|---|
| CSS | Le langage qui décide de l’apparence d’une page. | color: red; |
| Règle | Un sélecteur et ses réglages entre accolades. | h1 { color: blue; } |
| Sélecteur | Ce qui dit quels éléments reçoivent la règle. | h1, .score, #mot |
| Propriété | Ce qu’on veut changer. | color |
| Valeur | Ce qu’on met pour la propriété. | blue |
| Classe | Un nom qu’on donne à plusieurs éléments. On l’écrit avec un point. | .score |
Les cellules que les étudiants remplissent restent vides dans cet aperçu.
Une règle CSS
Une règle a trois morceaux : le sélecteur, puis entre accolades des couples propriété : valeur.
Chaque couple finit par un point-virgule. Exemple : h1 { color: darkgreen; }.
Tous les titres h1 de la page deviennent vert foncé.
À toi : habiller la page du club
<h1>FC Les Lilas</h1>
<p>Notre équipe joue le samedi.</p>
<p class="score">Dernier score : 3 à 1</p>
<p id="mot">Allez les Lilas !</p>
Les trois sélecteurs
| Sélecteur | Il vise | Dans la page du club |
|---|---|---|
| p | Toutes les balises p | Les trois paragraphes |
| .score | Les éléments avec class="score" | La ligne du score |
| #mot | L’élément avec id="mot" | Le dernier paragraphe, seul |
Les cellules que les étudiants remplissent restent vides dans cet aperçu.
Contrôle rapide : les sélecteurs
À toi de jouer
Contrôle rapide : les sélecteurs
3 questionsTes réponses sont corrigées ici et ne sont pas conservées. Un compte garde tes résultats.
Dire une couleur
On peut écrire une couleur par son nom : red, blue, darkgreen.
On peut aussi l’écrire avec un code hexadécimal, comme dans la leçon sur l’hexadécimal. #ff0000 se lit : rouge au maximum, vert à zéro, bleu à zéro.
Deux chiffres pour chacune des trois couleurs : rouge, vert, bleu.
Exemple travaillé : des codes de couleur
| Code | Rouge | Vert | Bleu | Couleur obtenue |
|---|---|---|---|---|
| #ff0000 | ff | 00 | 00 | Rouge |
| #00ff00 | 00 | ff | 00 | Vert |
| #0000ff | 00 | 00 | ff | Bleu |
| #ffff00 | ff | ff | 00 | Jaune |
| #000000 | 00 | 00 | 00 | Noir |
| #ffffff | ff | ff | ff | Blanc |
Les cellules que les étudiants remplissent restent vides dans cet aperçu.
À toi : des fonds colorés
<p class="a">Rouge</p>
<p class="b">Vert</p>
<p class="c">Bleu</p>
<p class="d">Orange</p>