Fondamentaux - Cours CSS

Fondamentaux du CSS

Les bases pour commencer à donner vie à ton site.

Imagine : tu viens de lancer un super jeu de rôle. Ton personnage, l'inventaire, les bâtiments... tout est là, construit par le HTML. Problème : tout est gris, sans âme, comme une maquette en argile.

Le CSS, c'est le kit de peinture et de customisation du jeu. C'est l'outil qui te permet de dire : « Toi, l'épée, je te veux brillante ! Toi, le bouton 'Inventaire', je te veux en rouge ! ». Pour ça, tu as besoin de deux choses : cibler un élément précis (un sélecteur) et lui dire quoi changer (une propriété).

1.1 Brancher la machine à style

Pour que la magie opère, ton fichier HTML (la maquette) doit être relié à ton fichier CSS (le kit de peinture). On utilise pour cela une balise <link>, à placer dans le <head> de ta page HTML.

<!-- Dans ton fichier HTML -->
<head>
  ...
  <link rel="stylesheet" href="style.css">
</head>

1.2 Ta première formule magique

Une "règle" CSS est la formule de base pour appliquer un style. Elle se compose toujours d'un sélecteur (la cible) et d'une ou plusieurs déclarations (le style à appliquer) entre accolades.

style.css

body {
  background-color: #1a1a2e;
  color: #ffffff;
}

Décortiquons cette formule :

Sélecteur : body. On cible la balise principale de la page.
Propriété : background-color. C'est ce qu'on veut changer, ici la couleur de fond.
Valeur : #1a1a2e. C'est le nouveau style, un bleu très foncé.

Notre page a maintenant un fond sombre et un texte blanc !

1.3 Cibler avec précision : Class et ID

Tu ne veux pas peindre tous les murs de la même couleur. Pour styliser des éléments spécifiques, on leur donne des "étiquettes" en HTML :

class : une étiquette pour un groupe d'éléments (ex: tous les boutons "acheter"). On la cible en CSS avec un point (.).
id : une étiquette unique pour un seul élément (ex: le logo principal). On le cible en CSS avec un dièse (#).

index.html

<!-- En HTML -->
<p class="texte-important">Attention, cette action est définitive.</p>
<p id="signature">Fait avec ❤️ par Balise Ton Site.</p>

style.css

/* En CSS */
.texte-important {
  color: #ffc107; /* Jaune ambré */
  font-weight: bold;
}

#signature {
  font-style: italic;
  text-align: right;
}

Attention, cette action est définitive.

Fait avec ❤️ par Balise Ton Site.

1.4 Le secret du CSS : tout est une boîte !

C'est le concept le plus important à comprendre : sur une page web, chaque élément est une boîte rectangulaire invisible. Un titre, un paragraphe, une image... tous sont des boîtes !

Une boîte est composée de 4 couches, de l'intérieur vers l'extérieur :

Contenu : Ton texte, ton image, etc.
Padding : L'espace à l'intérieur de la boîte, entre le contenu et la bordure (la marge intérieure).
Border : La bordure de la boîte.
Margin : L'espace à l'extérieur de la boîte, pour la séparer des autres éléments (la marge extérieure).

1.5 Choisir la bonne unité de mesure

Maintenant qu'on sait que tout est une boîte, comment en définir la taille ou les marges ? Avec les unités. Voici les 3 plus importantes pour commencer :

px (pixel) : L'unité absolue. C'est comme un millimètre. Une taille fixe.
% (pourcentage) : Une unité relative à la taille de l'élément parent.
rem (root em) : L'unité reine. Relative à la taille de police racine. Idéal pour l'accessibilité !

.carte-produit {
  width: 90%;             /* Prend 90% de la largeur du parent */
  padding: 1.5rem;        /* Marge intérieure harmonieuse */
  border: 2px solid #eee; /* Bordure très fine et fixe */
  margin-bottom: 1rem;    /* Espace en dessous */
}