CSS — mettre en forme une page

01Qu'est-ce que le CSS

CSS (Cascading Style Sheets, « feuilles de style en cascade ») décrit la présentation : mise en page, couleurs, polices, espacements. Son intérêt tient en un mot : la séparation. Le HTML porte le contenu et le sens ; le CSS porte l'apparence. On peut refaire tout le design d'un site sans toucher au HTML.

Trois façons d'insérer du CSS

<!-- dans le <head> du HTML -->
<link rel="stylesheet" href="style.css"></code>
<code>/* dans style.css */
h1 {
  color: blue;
  font-size: 18px;
}

02La règle CSS

Une règle a toujours la même anatomie : un sélecteur, puis un bloc de déclarations, chacune étant une paire propriété : valeur.

Ici : p cible tous les paragraphes, color est la propriété à changer, blue la valeur choisie. On peut empiler autant de déclarations qu'on veut dans le bloc.

03Les sélecteurs

Les sélecteurs simples

La classe (point .) est le sélecteur le plus utilisé : plusieurs éléments peuvent partager une classe. L'id (dièse #) désigne un élément unique dans la page.

Les sélecteurs combinés

Ils ciblent des éléments selon leur position dans l'arbre HTML.

04Le modèle de boîte

En CSS, chaque élément est une boîte rectangulaire. Cette boîte a quatre couches, de l'intérieur vers l'extérieur : le contenu, le padding (espace intérieur), la bordure, la marge (espace extérieur). C'est le concept le plus important de tout le CSS.

.carte {
  width: 200px;
  padding: 16px;
  border: 4px solid #2D5A27;
  margin: 12px;
  background: #EAF2E8;
}

Les autres propriétés courantes

• Couleurs : color (texte), background-color (fond). Valeurs : nom (red), hexadécimal (#FF0000), rgb(255,0,0).
• Polices : font-family, font-size, font-style (italic), font-weight (bold, 100–900).
• Texte : text-align (left, center, right, justify).

#FF0000  rouge pur      (R au max, V et B à zéro)
#00FF00  vert pur
#0000FF  bleu pur
#000000  noir           (tout à zéro)
#FFFFFF  blanc          (tout au max)
#2D5A27  le vert de ces fiches

* { box-sizing: border-box; }

05div & span

Deux conteneurs « neutres » (sans sens particulier) qui servent uniquement à regrouper pour styliser. Toute leur différence tient à un mot : bloc ou en ligne.

06Pseudo-classes

Une pseudo-classe cible un élément selon son état ou sa position, sans qu'on ait à ajouter de classe dans le HTML. On l'écrit avec un deux-points : sélecteur:pseudo-classe.

/* survol d'un bouton */
button:hover { background-color: #1E3D1A; }

/* premier et dernier élément d'une liste */
ul li:first-child { color: red; font-weight: bold; }
ul li:last-child  { color: blue; font-style: italic; }

/* teinter une case cochée */
input[type="checkbox"]:checked { accent-color: green; }

07Pseudo-éléments

Un pseudo-élément stylise une partie d'un élément, ou ajoute du contenu virtuel (qui n'existe pas dans le HTML). On l'écrit avec deux fois deux-points : élément::pseudo-élément.

/* une flèche verte devant chaque élément de liste */
li::before {
  content: "→ ";
  color: green;
}

/* une lettrine sur les paragraphes */
p::first-letter {
  font-size: 2em;
  font-weight: bold;
}

li::before {
  content: "→ ";
  color: #2D5A27;
  font-weight: bold;
}

08Flexbox

Flexbox est le module CSS qui règle enfin le vieux casse-tête : aligner, centrer et répartir des éléments. On rend un conteneur « flex » avec display: flex ; ses enfants directs deviennent des items alignés en ligne par défaut.

Propriétés du conteneur

Propriétés des items

.conteneur {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  background: #EAF2E8;
  padding: 10px;
}
.item {
  background: #2D5A27;
  color: #fff;
  padding: 12px 18px;
  border-radius: 6px;
}

.conteneur {
  display: flex;
  justify-content: center;   /* centre horizontalement */
  align-items: center;       /* centre verticalement */
  min-height: 100vh;         /* sur toute la hauteur de l'écran */
}

09Le responsive

Un site responsive s'adapte à la taille de l'écran : téléphone, tablette, ordinateur. L'outil pour cela est la media query — un bloc de CSS qui ne s'applique qu'à certaines conditions de largeur.

/* styles de base : pour mobile (petit écran) */
.formulaire { width: 100%; }

/* à partir de 768px (tablette) : on élargit */
@media screen and (min-width: 768px) {
  .formulaire { width: 700px; }
}

/* à partir de 1024px (ordinateur) */
@media screen and (min-width: 1024px) {
  .formulaire { width: 800px; }
}

<meta name="viewport" content="width=device-width, initial-scale=1">