🎨 CSS – Le Cours Complet + Explications + Exemples Réels

1. 🎯 Le Box Model (LA BASE du design)

🧱 Le concept :

Chaque élément HTML est une boîte composée de :

margin  → espace extérieur  
border  → bordure  
padding → espace intérieur  
content → contenu (texte/image)

✨ Propriétés :

1. width / height

➡️ Définit la largeur et hauteur d'un élément.

Exemple :

div {
  width: 300px;
  height: 150px;
}

2. padding

➡️ Espace à l’intérieur entre le contenu et la bordure.

Exemple :

div {
  padding: 20px;
}

3. margin

➡️ Espace à l’extérieur de la boîte.

Exemple :

div {
  margin: 20px;
}

4. border

➡️ La bordure autour de l’élément.

Exemple :

div {
  border: 2px solid black;
}

5. box-sizing

➡️ Contrôle comment la largeur est calculée.
border-box = recommandé partout.

Exemple :

* {
  box-sizing: border-box;
}

2. 🎛️ Les couleurs et backgrounds

1. color

➡️ Couleur du texte.

p { color: red; }

2. background-color

➡️ Couleur du fond.

div { background-color: #333; }

3. background-image

➡️ Ajoute une image de fond.

div {
  background-image: url("image.jpg");
}

4. background-size

➡️ cover = l’image couvre toute la zone
➡️ contain = visible entièrement mais peut avoir espace vide

div {
  background-size: cover;
}

3. ✨ Texte

1. font-size

➡️ Taille du texte.

h1 { font-size: 30px; }

2. font-weight

➡️ Épaisseur du texte (gras).

p { font-weight: bold; }

3. text-align

➡️ Alignement du texte.

p { text-align: center; }

4. line-height

➡️ Hauteur de ligne → rend le texte respirant.

p { line-height: 1.5; }

4. 🔳 Display – comment l’élément se comporte

1. display: block

➡️ Occupe toute la largeur
➡️ Va à la ligne

Exemple : <div>

2. display: inline

➡️ Prend juste sa taille
➡️ Ne va pas à la ligne

Exemple : <span>

3. display: inline-block

➡️ Mélange des deux
➡️ Permet width/height

4. display: none

➡️ Cache complètement un élément.

5. 📦 Flexbox – créer facilement des mises en page modernes

5.1. Le container (parent)

1. display: flex

➡️ Active le mode flex.

2. flex-direction

➡️ direction des enfants
row (par défaut) → horizontal
column → vertical

.container {
  display: flex;
  flex-direction: row;
}

3. justify-content

➡️ Alignement horizontal
center, space-between, space-around

container {
  justify-content: center;
}

4. align-items

➡️ Alignement vertical

.container {
  align-items: center;
}

5.2. Les enfants

1. flex-grow

➡️ L’élément peut s’étendre.

div { flex-grow: 1; }

2. flex-basis

➡️ Taille de base.

6. 🧩 Grid – le système de layout le plus puissant

1. Activer grid

.container {
  display: grid;
}

2. Définir les colonnes

grid-template-columns: repeat(3, 1fr);

➡️ 3 colonnes égales

3. Espacement

gap: 20px;

4. Positionner un élément

.item {
  grid-column: 1 / 3;
}

7. 🧨 Positionnement

1. position: relative

➡️ Devient la référence des éléments en absolute.

2. position: absolute

➡️ Positionné par rapport au parent relative.

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 10px;
  right: 10px;
}

3. position: fixed

➡️ Fixé sur l’écran → utile pour navbar fixe.

4. z-index

➡️ Mettre devant ou derrière.

8. 🌟 Effets visuels

1. border-radius

➡️ Arrondir les coins.

div { border-radius: 10px; }

2. box-shadow

➡️ Ombre douce (design moderne).

div {
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

3. opacity

➡️ Transparence.

div { opacity: 0.7; }

4. Dégradé

background: linear-gradient(to right, red, blue);

9. 🔧 Transformations

transform: scale()

➡️ Agrandir / réduire

transform: rotate()

➡️ Tourner

transform: translate()

➡️ Déplacer

10. 🎬 Transitions et animations

1. Transition

➡️ Rendre un changement fluide

button {
  background: blue;
  transition: 0.3s;
}

button:hover {
  background: red;
}

2. Animation

➡️ Mouvement continu

@keyframes bouge {
  from { transform: translateX(0); }
  to { transform: translateX(50px); }
}

div {
  animation: bouge 2s infinite;
}

11. 📱 Responsive (mobile, tablette)

Media query

@media (max-width: 768px) {
  div {
    flex-direction: column;
  }
}

12. 🧩 Pseudo-classes et pseudo-éléments

:hover

➡️ Quand la souris passe dessus

:focus

➡️ Quand l’input est cliqué

::before / ::after

➡️ Ajouter du contenu décoratif

button::after {
  content: "👉";
}