Apprendre CSS : créer une interface lisible

Qu'est-ce que CSS ?

CSS signifie Cascading Style Sheets, ou « feuilles de style en cascade ». Il sépare la présentation du contenu : HTML décrit une information, CSS décide de son apparence. Cette séparation permet de modifier tout un site sans réécrire ses pages.

CSS a été proposé au milieu des années 1990 afin d'éviter que chaque document HTML contienne ses propres instructions de couleur et de taille. Il est aujourd'hui standardisé et interprété nativement par tous les navigateurs modernes.

Comment CSS arrive dans une page

La méthode recommandée est un fichier externe relié dans le head. Toutes vos pages peuvent ainsi partager la même identité visuelle.

<link rel="stylesheet" href="assets/style.css">

Évitez les styles directement dans l'attribut style, car ils sont difficiles à réutiliser et à maintenir.

Couleurs, typographie et contraste

Vous pouvez définir les couleurs en hexadécimal (#00d4ff), RGB ou HSL. Privilégiez un contraste suffisant entre le texte et son fond. Pour la typographie, limitez le nombre de polices, choisissez une taille confortable et augmentez l'interligne pour les paragraphes.

1. Lire une règle CSS

Une règle associe un sélecteur à des déclarations. Le sélecteur cible un élément et chaque déclaration définit une propriété et sa valeur.

.bouton {
  background-color: #00d4ff;
  color: #0a0a0f;
  padding: 12px 20px;
}

Ici, .bouton cible tous les éléments ayant la classe bouton. Le point indique une classe ; # cible un identifiant unique.

2. Comprendre la cascade et l'héritage

Plusieurs règles peuvent cibler le même élément. Le navigateur choisit selon l'ordre, la précision du sélecteur et parfois !important. Évitez ce dernier : préférez une structure de classes claire.

Certains styles, comme la couleur ou la police, sont hérités par les enfants. D'autres, comme les marges et les bordures, ne le sont pas.

3. Gérer les dimensions et les espaces

Chaque élément est une boîte : contenu, padding interne, border et margin externe. Définissez box-sizing: border-box pour que la largeur inclue padding et bordure.

* {
  box-sizing: border-box;
}

.carte {
  max-width: 360px;
  margin: 0 auto;
  padding: 24px;
}

4. Mettre en page avec Flexbox et Grid

Flexbox convient aux alignements sur une dimension, par exemple un menu ou un groupe de boutons. Grid est excellent pour les grilles de cartes et les mises en page à deux dimensions.

.cartes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

Utilisez gap pour espacer les éléments plutôt que des marges compliquées.

5. Adapter votre interface au mobile

Le responsive design adapte la mise en page à l'espace disponible. Commencez avec une structure lisible sur mobile puis ajoutez une media query quand l'écran s'élargit.

@media (max-width: 700px) {
  .cartes {
    grid-template-columns: 1fr;
  }
}

6. Créer des états visibles

Les pseudo-classes décrivent un état. :hover s'applique au survol, :focus-visible lorsqu'un élément reçoit le focus au clavier et :disabled à un contrôle indisponible. Ne retirez jamais le focus sans le remplacer par un indicateur visible.

.bouton:focus-visible {
  outline: 3px solid #00ff88;
  outline-offset: 3px;
}

7. Réutiliser les choix de design

Les variables CSS, ou propriétés personnalisées, évitent de répéter les mêmes couleurs, espacements et tailles. Elles facilitent aussi la création d'un thème clair ou sombre.

:root {
  --couleur-primaire: #00d4ff;
  --espace: 16px;
}

.bouton { padding: var(--espace); }