CSS (Cascading Style Sheets)

I. À quoi sert le CSS ?

Le HTML permet de structurer une page web (titres, paragraphes, images, liens, etc.),

mais il ne gère pas l’apparence visuelle : couleurs, tailles, marges, disposition, etc.

C’est là que le CSS intervient :

CSS est le langage de style qui permet de personnaliser l’apparence des pages HTML.

CSS = "Feuilles de style en cascade", car plusieurs styles peuvent s’appliquer et se superposer selon des règles précises.

II. Objectif du CSS

Avec CSS, tu peux :

III. Comment relier CSS et HTML ?

Il y a 3 méthodes pour ajouter du CSS dans une page HTML.

💡 La meilleure pour un vrai projet est la méthode externe.

1. CSS externe (méthode recommandée)

Tu écris le CSS dans un fichier séparé, puis tu le relies dans le <head> du HTML :

HTML (index.html)

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css"> <!-- liaison css-->
  </head>
  <body>
    <h1>Bonjour !</h1>
  </body>
</html>

CSS (style.css)

h1 {
  color: blue;
}

✅ Avantage : propre, clair, réutilisable.

2. CSS interne

Tu écris le CSS dans un bloc <style> situé dans la balise <head> :

<head>
  <style>
    h1 {
      color: red;
    }
  </style>
</head>

3. CSS en ligne (déconseillé)

Tu mets le style directement dans la balise HTML :

<h1 style="color: green;">Titre</h1>

🚫 À éviter : rend le code illisible et difficile à maintenir.

IV. Syntaxe CSS

sélecteur {
  propriété: valeur;
  propriété: valeur;
}

Exemple :

p {
  color: black;
  font-size: 16px;
}
🔹 Le sélecteur désigne ce qu’on cible (ex : p, h1, .maClasse, etc.)

🔹 La propriété est ce que tu veux changer (ex : color, margin, font-size)

🔹 La valeur est la modification à appliquer

V. Sélecteurs CSS

1. Sélecteurs simples

SélecteurCible
pTous les paragraphes <p>
h1Tous les titres <h1>
*Tous les éléments (universel)

2. Sélecteurs de classe

Les classes permettent de cibler des éléments spécifiques en leur donnant un nom.

HTML

<p class="important">Ce texte est important.</p>

CSS

.important {
  color: red;
  font-weight: bold;
}
✅ Une classe peut être réutilisée sur plusieurs éléments.

Elle commence par un . dans le CSS.

3. Sélecteurs d’ID

Un ID est un identifiant unique.

HTML

<p id="accueil">Bienvenue !</p>

CSS

#accueil {
  color: green;
}
⚠️ Un ID ne doit être utilisé qu’une seule fois par page.

4. Sélecteurs combinés

ul li {
  color: blue;
}

→ Tous les éléments <li> dans une liste <ul>

p.important {
  font-size: 20px;
}

→ Tous les <p> qui ont la classe important

VI. Propriétés CSS les plus utilisées

1. Couleurs

color: blue;
background-color: lightgray;

→ color = couleur du texte

→ background-color = couleur de fond

2. Police et texte

font-size: 18px;
font-family: Arial, sans-serif;
text-align: center;
font-weight: bold;

3. Marges et espacements

margin: 10px;        /* Espace extérieur */
padding: 10px;       /* Espace intérieur */

4. Bordures

border: 2px solid black;
Structure : épaisseur + style + couleur

5. Largeur et hauteur

width: 300px;
height: 100px;

6. Affichage (display)

display: block;
display: inline;
display: flex;

VII. Exemple complet

HTML

<p class="important">Attention : ceci est très important !</p>

CSS

.important {
  color: red;
  font-weight: bold;
  font-size: 20px;
  background-color: #f8d7da;
  padding: 10px;
  border: 2px solid red;
}

VIII. Bonnes pratiques CSS

IX. Pour aller un peu plus loin

a:hover {
  color: red;
}

→ Changer la couleur d’un lien quand on passe la souris

@media screen and (max-width: 600px) {
  body {
    font-size: 14px;
  }
}

X. Résumé visuel de la liaison HTML / CSS

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

<body>
  <p class="texte-special">Bonjour</p>
</body>
/* Fichier style.css */
.texte-special {
  color: orange;
  font-size: 24px;
}