module · html et css · 20 min

Le contenu d'un côté, le style de l'autre.

Une page web est un texte balisé : le HTML dit ce que contient la page, la feuille de style dit comment l'afficher. Chaque clic écrit une ligne de code, le rendu suit. Cliquer un élément de la page montre la balise qui l'a produit et les règles qui le touchent.

ajouter

feuille

index.htmlécrit par les clics

<h1>La Cabane à vélos</h1>
<p>Le samedi, chacun répare son vélo.</p>

<h1>La Cabane à vélos</h1>
<p>Le samedi, chacun répare son vélo.</p>

style.cssécrit par les clics

https://cabane.example/index.html

inspecteur

Cliquer un élément de la page, ou une ligne du code.

▶ écrit par le dernier clic● élément inspecté⊘ ignoré par le navigateur

montrer l'ignoré

grand texte

montrer l'ignoré

grand texte

s'entraîner niveau par niveau : le jeu des balises

index.html

style.css

https://cabane.example/index.html

règle CSS

syntaxe

Une règle dit à quels éléments s'applique un style, puis quel style. Le sélecteur choisit les éléments, chaque déclaration règle une propriété.

Une déclaration mal écrite est ignorée sans message d'erreur, et un point-virgule oublié fait perdre aussi la déclaration suivante.

la page complète sur MDN

syntaxe

sélecteur {
  propriété: valeur;
  propriété: valeur;
}

sélecteur {
  propriété: valeur;
  propriété: valeur;
}

exemple

h1 {
  color: navy;
  text-align: center;
}

h1 {
  color: navy;
  text-align: center;
}