Mémo — CSS

Avec des recettes prêtes à copier

Brancher la feuille de style

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

Une règle

selecteur {
  propriete: valeur;
}

Deux-points · point-virgule à chaque ligne · accolades.

Les sélecteurs

p          { }   /* toutes les balises <p> */
.intro     { }   /* tous les class="intro" */
#titre     { }   /* l'élément id="titre" */
body       { }   /* toute la page */
h1, h2, h3 { }   /* les trois à la fois */
main p     { }   /* les <p> situés dans <main> */
a:hover    { }   /* un lien survolé par la souris */

ImportantLe point et le dièse

• HTML : class="intro" → CSS : .intro
• HTML : id="titre" → CSS : #titre

Oublier le point ou le dièse est l’erreur la plus fréquente.

Qui gagne quand deux règles se contredisent ?

balise  <  .classe  <  #id  <  style="…" dans le HTML

À force égale, la dernière écrite dans le fichier l’emporte.

Les propriétés

Texte

color: #333;                     /* couleur du texte */
font-size: 18px;
font-family: system-ui, Arial, sans-serif;
font-weight: bold;               /* normal | bold */
font-style: italic;
text-align: center;              /* left | center | right */
text-decoration: none;           /* enlève le soulignement des liens */
line-height: 1.6;                /* interligne */

Fond et bordures

background-color: #eef6fb;
border: 2px solid #2c6fa8;
border-top: 1px solid #ddd;      /* un seul côté */
border-radius: 8px;              /* coins arrondis */

La boîte

padding: 16px;        /* DEDANS  : éloigne le texte de la bordure */
margin: 24px;         /* DEHORS  : éloigne des voisins */
width: 300px;
max-width: 700px;     /* ne dépasse jamais cette largeur */
height: 200px;

Valeurs multiples :

padding: 10px 20px;              /* haut-bas | gauche-droite */
padding: 10px 20px 30px 40px;    /* haut | droite | bas | gauche */
margin: 0 auto;                  /* 0 haut-bas, centré horizontalement */

Divers

display: none;        /* cache complètement l'élément */
cursor: pointer;      /* main au survol */
opacity: 0.5;         /* semi-transparent */

Les couleurs

color: red;                  /* nom anglais */
color: #e74c3c;              /* code hexadécimal */
color: rgb(231, 76, 60);     /* rouge, vert, bleu */
color: rgba(231, 76, 60, 0.5); /* … avec transparence */

AstuceChoisir une couleur dans VS Code

Tapez color: # : un carré coloré apparaît. Cliquez dessus pour ouvrir le sélecteur.

---

Les recettes

Copiez-collez, ajustez les valeurs. Pas besoin de tout comprendre.

Une page qui a l’air propre

style.css

body {
  font-family: system-ui, Arial, sans-serif;
  line-height: 1.6;
  color: #22303d;
  max-width: 700px;
  margin: 0 auto;
  padding: 24px;
}

Une carte

.carte {
  border: 1px solid #e1e6eb;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 16px;
  background: white;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

Un bouton présentable

button {
  font-size: 16px;
  padding: 10px 18px;
  border: none;
  border-radius: 8px;
  background-color: #2c6fa8;
  color: white;
  cursor: pointer;
}

button:hover {
  background-color: #1f5482;
}

Mettre des éléments côte à côte

.rangee {
  display: flex;
  gap: 16px;              /* espace entre les éléments */
  align-items: center;    /* alignement vertical */
}

<div class="rangee">
  <img src="photo.jpg" alt="…" />
  <p>Le texte est à droite de l'image.</p>
</div>

Centrer un contenu, horizontalement et verticalement

.centre {
  display: flex;
  justify-content: center; /* horizontalement */
  align-items: center;     /* verticalement */
  min-height: 300px;
}

Une grille de cartes

.grille {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 colonnes égales */
  gap: 16px;
}

Une liste sans puces (menu)

nav ul {
  list-style: none;
  padding: 0;
  display: flex;
  gap: 20px;
}

nav a {
  text-decoration: none;
  color: #2c6fa8;
}

Une image qui ne déborde jamais

img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

Un message d’erreur / de succès

.erreur {
  color: #c0392b;
  background-color: #fdecea;
  padding: 10px;
  border-radius: 6px;
}

.succes {
  color: #1e7e34;
  background-color: #e8f6ec;
  padding: 10px;
  border-radius: 6px;
}

Un mode sombre

.sombre {
  background-color: #1e1e1e;
  color: #f0f0f0;
}

document.body.classList.toggle("sombre");

---

Les erreurs fréquentes

Erreur	Symptôme
<link> oublié	Aucun style ne s’applique
Point oublié : intro { }	La règle ne s’applique à rien
Point-virgule oublié	La ligne suivante est ignorée
colour au lieu de color	Rien ne se passe, aucun message
Casse différente HTML/CSS	La règle ne s’applique pas

AstuceLe CSS ne signale jamais ses erreurs

Une ligne fautive est ignorée en silence. Utilisez l’inspecteur du navigateur (clic droit → Inspecter) : les règles barrées ou absentes vous disent où chercher.