CSS · Leçon 1

Syntaxe & sélecteurs

Le CSS dit à quoi ressemblent les éléments. Tout commence par choisir quels éléments styler : c'est le rôle du sélecteur.

Anatomie d'une règle

h1 {                 ← sélecteur : QUI ?
  color: tomato;     ← propriété: valeur;
  font-size: 40px;   ← on finit par un point-virgule
}

Où écrire son CSS ?

① Fichier séparé ✅

<link rel="stylesheet" href="style.css"> dans le head. La bonne pratique : un seul fichier pour tout le site.

② Balise style

<style> h1 { … } </style> dans le head. Pratique pour tester.

③ Attribut style

<p style="color:red">. À éviter : difficile à maintenir.

Les sélecteurs essentiels

SélecteurCible…
ptoutes les balises <p>
.promoles éléments avec class="promo" (réutilisable)
#logol'élément avec id="logo" (unique dans la page)
h1, h2les h1 et les h2 (groupe)
nav ales liens qui sont dans un nav (descendant)
*tous les éléments

Décommente les règles une à une (retire /* et */) pour voir qui est ciblé :

Plusieurs classes Un élément peut en avoir plusieurs : class="bouton rouge grand". Et p.promo cible les p qui ont la classe promo.

Les pseudo-classes

Elles ciblent un état ou une position. Survole les éléments de l'aperçu !

Qui gagne en cas de conflit ?

Quand deux règles se contredisent : la plus précise gagne (#id > .classe > balise). À précision égale, la dernière écrite gagne.

Si on supprime la règle #msg ci-dessus, de quelle couleur sera le texte ?

  1. Bleu
  2. Rouge
  3. Orange

La classe .alerte est plus précise que la balise p, peu importe l'ordre. (Vérifie en modifiant le code !)

À toi de jouer

Le jeu des sélecteurs

Ne touche pas au HTML : écris seulement le CSS.

  • Les titres h1 et h2 en navy (une seule règle).
  • Les éléments de classe important en red.
  • Le paragraphe d'id intro en italique (font-style: italic).
  • Les liens du menu uniquement sans soulignement (text-decoration: none).
IndiceIl faut 4 règles, une par consigne. Rappel : balise = h1, classe = .nom, identifiant = #nom.
IndicePlusieurs sélecteurs dans une seule règle : sépare-les par une virgule, h1, h2 { … }. « Les liens dans le menu » : un espace entre les deux, nav a.
IndiceLes sélecteurs à utiliser :
h1, h2 { color: navy; }
.important { ... }
#intro { ... }
nav a { ... }

Le tableau zébré

  • Les lignes paires du tableau ont un fond #eeeeee.
  • La première ligne (en-tête) est en gras (font-weight: bold).
  • Au survol d'une ligne, son fond devient gold.
IndiceChaque ligne est un tr. Les pseudo-classes ciblent selon la position ou l’état : :first-child, :nth-child(), :hover.
Indicetr:nth-child(even) cible les lignes paires. tr:hover s’applique quand la souris survole une ligne.
IndiceLes trois règles à compléter :
tr:nth-child(even) { background: #eeeeee; }
tr:first-child { ... }
tr:hover { ... }

À retenir