Aller au contenu

Séance 4 : Introduction CSS, sélecteurs et Box Model

🎯 Objectifs de la séance

À la fin de cette séance, vous serez capable de :

  • Intégrer du CSS dans une page HTML
  • Utiliser les sélecteurs CSS de base et avancés
  • Comprendre et maîtriser le Box Model CSS
  • Appliquer des styles de texte, couleurs et espacements
  • Comprendre la spécificité et la cascade CSS

📚 Partie théorique

4.1 Qu'est-ce que le CSS ?

CSS (Cascading Style Sheets) = Feuilles de style en cascade

Le CSS permet de séparer le contenu (HTML) de la présentation (design).

<h1>Titre</h1>

h1 {
    color: blue;
    font-size: 2em;
    font-weight: bold;
}

✅ Séparation claire
✅ Facile à maintenir
✅ Style réutilisable

4.2 Les 3 façons d'intégrer du CSS

1. CSS inline (dans la balise)

<p style="color: red; font-size: 16px;">Texte rouge</p>

❌ À éviter : mélange HTML et CSS, difficile à maintenir

2. CSS interne (dans <head>)

<head>
    <style>
        p {
            color: red;
            font-size: 16px;
        }
    </style>
</head>

✅ Utile pour des styles spécifiques à une page
⚠️ Pas réutilisable entre pages

3. CSS externe (fichier séparé) ⭐ RECOMMANDÉ

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

/* style.css */
p {
    color: red;
    font-size: 16px;
}

✅ Séparation totale
✅ Réutilisable sur toutes les pages
✅ Mise en cache par le navigateur

4.3 Syntaxe CSS

selecteur {
    propriete: valeur;
    autre-propriete: autre-valeur;
}

Exemple concret :

h1 {
    color: #2c3e50;
    font-size: 32px;
    text-align: center;
}
  • Sélecteur : élément HTML ciblé (h1)
  • Propriété : aspect à modifier (color, font-size)
  • Valeur : style appliqué (#2c3e50, 32px)
  • ; sépare les déclarations
  • {} délimite le bloc de styles

Commentaires CSS

/* Ceci est un commentaire sur une ligne */

/* 
   Commentaire
   sur plusieurs
   lignes
*/

4.4 Sélecteurs de base

Sélecteur d'élément

Cible tous les éléments d'un type.

p {
    color: gray;
}

h1 {
    font-size: 2em;
}

Sélecteur de classe (.)

Cible les éléments avec une classe spécifique.

<p class="important">Texte important</p>
<p>Texte normal</p>
<div class="important">Div important</div>

.important {
    color: red;
    font-weight: bold;
}

✅ Réutilisable sur plusieurs éléments
✅ Peut être utilisé sur différents types d'éléments

Sélecteur d'ID (#)

Cible un élément avec un ID spécifique (unique).

<div id="header">En-tête</div>

#header {
    background-color: navy;
    color: white;
}

⚠️ Un ID doit être unique dans la page
⚠️ Préférez les classes (plus flexible)

Sélecteur universel (*)

Cible tous les éléments.

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

4.5 Sélecteurs combinés

Sélecteur descendant (espace)

Cible les éléments descendants (enfants, petits-enfants...).

<div class="container">
    <p>Ce paragraphe sera stylé</p>
    <section>
        <p>Celui-ci aussi</p>
    </section>
</div>

.container p {
    color: blue;
}

Sélecteur d'enfant direct (>)

Cible uniquement les enfants directs.

<div class="container">
    <p>Stylé (enfant direct)</p>
    <section>
        <p>Non stylé (petit-enfant)</p>
    </section>
</div>

.container > p {
    color: blue;
}

4.6 Pseudo-classes

Ciblent des états ou positions spécifiques.

/* Au survol */
a:hover {
    color: red;
}

/* Au focus */
input:focus {
    border-color: blue;
}

/* Premier/dernier enfant */
li:first-child { font-weight: bold; }
li:last-child { border-bottom: none; }

/* Lignes alternées */
tr:nth-child(odd) { background-color: #f0f0f0; }
tr:nth-child(even) { background-color: white; }

4.7 Propriétés de texte et de couleur

Couleurs

/* Différentes syntaxes */
color: red;                    /* Nom */
background-color: red;
color: #ff0000;                /* Hexadécimal */
color: rgb(255, 0, 0);        /* RGB */
color: rgba(255, 0, 0, 0.5);  /* RGBA avec transparence */

Police de caractères

p {
    /* Famille de police */
    font-family: Arial, Helvetica, sans-serif;

    /* Taille */
    font-size: 16px;
    /* ou en em, rem, %, vw... */

    /* Graisse */
    font-weight: bold; /* ou 400, 700... */

    /* Style */
    font-style: italic;

    /* Alignement */
    text-align: center; /* left, right, justify */

    /* Décoration */
    text-decoration: underline; /* none, line-through */

    /* Transformation */
    text-transform: uppercase; /* lowercase, capitalize */

    /* Hauteur de ligne */
    line-height: 1.5;

    /* Espacement des lettres */
    letter-spacing: 2px;
}

4.8 Le Box Model (Modèle de boîte)

⭐ Concept fondamental du CSS : Chaque élément HTML est une boîte rectangulaire composée de 4 zones.

Schéma du Box Model

┌─────────────────────────────────┐
│         MARGIN (marge)          │  ← Espace extérieur transparent
│  ┌───────────────────────────┐  │
│  │    BORDER (bordure)       │  │  ← Contour visible
│  │  ┌─────────────────────┐  │  │
│  │  │  PADDING (rembour.) │  │  │  ← Espace intérieur
│  │  │  ┌───────────────┐  │  │  │
│  │  │  │   CONTENT     │  │  │  │  ← Contenu (texte, images)
│  │  │  │   (contenu)   │  │  │  │
│  │  │  └───────────────┘  │  │  │
│  │  └─────────────────────┘  │  │
│  └───────────────────────────┘  │
└─────────────────────────────────┘

Propriétés du Box Model

.box {
    /* Contenu */
    width: 300px;
    height: 200px;

    /* Padding (espace intérieur) */
    padding: 20px;              /* Tous les côtés */
    padding: 20px 10px;         /* Vertical | Horizontal */
    padding: 10px 20px 30px;    /* Haut | H&D | Bas */
    padding: 10px 20px 30px 40px; /* Haut Droite Bas Gauche */

    /* Border (bordure) */
    border: 2px solid black;
    border-radius: 10px;        /* Coins arrondis */

    /* Margin (espace extérieur) */
    margin: 20px;
    margin: 0 auto;             /* Centrer horizontalement */
}

Box-sizing

Par défaut (box-sizing: content-box) :

/* PAR DÉFAUT - À ÉVITER */
.box {
    width: 300px;
    padding: 20px;
    border: 5px solid black;
}
/* Largeur réelle = 300 + 40 + 10 = 350px */

/* RECOMMANDÉ - box-sizing: border-box */
* {
    box-sizing: border-box;
}

.box {
    width: 300px;
    padding: 20px;
    border: 5px solid black;
}
/* Largeur réelle = 300px (padding et border inclus) */

⭐ Bonne pratique : Toujours utiliser box-sizing: border-box globalement !

4.9 Display et positionnement de base

/* Display */
display: block;       /* Prend toute la largeur */
display: inline;      /* Sur la même ligne */
display: inline-block; /* Hybride */
display: none;        /* Caché */

/* Centrer un bloc */
.container {
    max-width: 800px;
    margin: 0 auto;    /* Centré horizontalement */
}

4.10 Spécificité et cascade

Quand plusieurs règles s'appliquent au même élément, laquelle gagne ?

Ordre de priorité (du plus fort au plus faible)

  1. !important (à éviter)
  2. Style inline (style="")
  3. ID (#id)
  4. Classe, attribut, pseudo-classe (.class, [attr], :hover)
  5. Élément (h1, p)

Calcul de la spécificité

(inline, IDs, classes, éléments)

Exemples :

p { }                    /* (0,0,0,1) */
.classe { }              /* (0,0,1,0) */
#id { }                  /* (0,1,0,0) */
p.classe { }             /* (0,0,1,1) */
div p.classe { }         /* (0,0,1,2) */
#id .classe p { }        /* (0,1,1,1) */

La cascade

Si la spécificité est égale, c'est la dernière règle qui l'emporte.

p { color: blue; }
p { color: red; }  /* Cette règle s'applique */

💻 Partie pratique

Exercice 5 : Styliser un article de blog

📝 À retenir de cette séance

✅ Le CSS sépare le contenu (HTML) de la présentation (design)
✅ Préférer le CSS externe pour la maintenabilité
✅ Les sélecteurs permettent de cibler précisément les éléments
✅ Le Box Model : content → padding → border → margin
✅ Toujours utiliser box-sizing: border-box pour faciliter les calculs
✅ La spécificité détermine quelle règle s'applique en cas de conflit
✅ Les pseudo-classes (:hover, :focus) ajoutent de l'interactivité
✅ Utiliser des classes plutôt que des IDs pour le style
✅ Organiser le CSS avec des commentaires et des sections
✅ max-width + margin: 0 auto permet de centrer et limiter la largeur

📚 Pour aller plus loin

Documentation

Outils

Jeu