Les bases du CSS : sélecteurs, couleurs, unités et polices

Une règle CSS associe un sélecteur, qui désigne les éléments HTML visés, à des déclarations propriété: valeur;, qui disent comment les afficher. Ce chapitre montre comment relier une feuille de style à une page, puis passe en revue les sélecteurs (classes, combinateurs, pseudo-classes), les couleurs, les unités, le texte, les polices et les fonds : de quoi mettre en forme une page entière.

Les trois façons d'ajouter du CSS

La feuille externe a trois avantages : une seule feuille met en forme toutes les pages du site (changer la couleur des titres partout, c'est changer une ligne) ; le navigateur la garde en cache et ne la retélécharge pas à chaque page ; le HTML reste propre, sans aucune information de présentation.

La syntaxe d'une règle CSS

/* Les titres de section de la médiathèque */
h2 {
  color: #0f766e;
  font-size: 1.75rem;
  margin-bottom: 0.5em;
}

• h2 est le sélecteur : la règle s'applique à tous les <h2> ;
• entre accolades, le bloc de déclarations ;
• chaque déclaration est une paire propriété: valeur, terminée par un point-virgule ;
• les commentaires s'écrivent entre /* et */ ; il n'y a pas de // en CSS.

Une erreur de syntaxe (un ; oublié, une accolade en trop) n'arrête pas tout le fichier : le navigateur ignore la déclaration fautive, parfois tout le bloc, et continue. C'est pratique, mais l'erreur est silencieuse : l'inspecteur montre une déclaration invalide barrée avec un petit triangle d'avertissement.

Plusieurs sélecteurs peuvent partager une même règle, séparés par des virgules :

h1,
h2,
h3 {
  font-family: Georgia, serif;
}

Les sélecteurs de base : balise, classe, identifiant

Un élément peut porter plusieurs classes, séparées par des espaces : <article class="carte complet">. Les règles de .carte et de .complet s'appliquent toutes les deux, et .carte.complet (sans espace) vise les éléments qui ont les deux classes à la fois.

Les combinateurs

Un combinateur exprime une relation entre deux éléments dans l'arbre du DOM (chapitre 2).

/* Les liens du menu, et seulement eux */
nav a {
  text-decoration: none;
}

/* Le premier niveau du menu, pas les sous-menus */
.menu > li {
  display: inline-block;
}

/* Le chapeau : le premier paragraphe après un titre d'article */
article h2 + p {
  font-size: 1.15rem;
}

Les sélecteurs d'attribut

/* Signaler les liens vers un PDF */
a[href$=".pdf"]::after {
  content: " (PDF)";
}

Les pseudo-classes

Une pseudo-classe, introduite par un deux-points, vise un élément selon son état ou sa position.

/* Lignes de tableau zébrées */
tbody tr:nth-child(even) {
  background-color: #f1f5f9;
}

/* Un focus clavier toujours visible */
a:focus-visible,
button:focus-visible {
  outline: 3px solid #0f766e;
  outline-offset: 2px;
}

/* Pas de trait de séparation après le dernier élément du menu */
.menu li:not(:last-child) {
  border-right: 1px solid #cbd5e1;
}

Pour les liens, l'ordre des règles compte : écris-les dans l'ordre :link, :visited, :hover, :active (moyen mnémotechnique : LoVe HAte), sinon :visited écrase :hover (chapitre 7).

Les pseudo-éléments

Un pseudo-élément, introduit par deux deux-points, vise une partie d'un élément ou crée un élément virtuel.

/* Un astérisque après l'étiquette des champs obligatoires */
.obligatoire::after {
  content: " *";
  color: #b91c1c;
}

/* Des puces de la couleur de la charte */
li::marker {
  color: #0f766e;
}

Le contenu ajouté par content est décoratif : il ne se sélectionne pas, et les lecteurs d'écran ne le lisent pas toujours. N'y mets jamais une information essentielle.

Les couleurs en CSS

La syntaxe ancienne rgba(15, 118, 110, 0.5), avec des virgules, reste valide ; la syntaxe moderne, avec des espaces et une barre oblique, fonctionne partout aujourd'hui.

color change la couleur du texte, background-color celle du fond. Une charte graphique fixe en général une couleur principale, une ou deux couleurs secondaires et des gris : on les déclare une seule fois dans des variables CSS (chapitre 11).

Les unités : px, %, em, rem, vw et vh

Le piège de em : il se multiplie en cascade.

html { font-size: 100%; }      /* 16 px, ou la taille choisie par l'utilisateur */
.carte { font-size: 1.25em; }  /* 1,25 × 16 = 20 px */
.carte p { font-size: 1.25em; }/* 1,25 × 20 = 25 px, et non 20 px */
.carte p { font-size: 1.25rem; }/* avec rem : 1,25 × 16 = 20 px, toujours */

Le texte et les polices

body {
  font-family: "Atkinson Hyperlegible", system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: #1f2937;
}

h1 {
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.surtitre {
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

system-ui utilise la police de l'interface du système (Segoe UI sous Windows, San Francisco sous macOS et iOS, Roboto sous Android) : rapide, lisible, sans aucun téléchargement.

Pour une police particulière, la bonne méthode est de l'héberger toi-même, au format WOFF2, et de la déclarer avec @font-face :

@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("../fonts/atkinson-hyperlegible-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

font-display: swap affiche d'abord le texte avec la police de secours, puis bascule quand la police est chargée : le texte n'est jamais invisible pendant le chargement.

Ne charge que les graisses que tu utilises vraiment : chaque fichier de police pèse quelques dizaines de kilo-octets.

Les fonds

.bandeau {
  background-color: #0f766e;
  background-image: url("../images/feuilles.svg");
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: 200px auto;
}

.hero {
  background: linear-gradient(135deg, #0f766e, #134e4a);
  color: white;
}

.photo-fond {
  background-image: url("../images/facade.jpg");
  background-size: cover;       /* couvre toute la zone, quitte à rogner */
  background-position: center;
}

Exercices

<nav class="menu">
  <ul>
    <li><a href="index.html">Accueil</a></li>
    <li><a href="agenda.html" class="actif">Agenda</a>
      <ul>
        <li><a href="agenda.html#numerique">Numérique</a></li>
      </ul>
    </li>
    <li><a href="https://www.bnf.fr">BnF</a></li>
  </ul>
</nav>

.encadre { font-size: 1.5rem; }
.encadre h3 { font-size: 1.5em; }
.encadre small { font-size: 0.75em; }
.note { font-size: 0.875rem; }

body {
  font-family: system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: #1f2937;
}

header {
  background-color: #0f766e;
}

header a {
  color: white;
  text-decoration: none;
}

header nav a:hover,
header nav a:focus-visible {
  text-decoration: underline;
}

h2 {
  color: #0f766e;
  font-size: 1.75rem;
}

nav a[aria-current="page"] {
  font-weight: 700;
}