Aller au contenu principal

Module CSS.1 – Fondamentaux

Objectif​

Comprendre ce qu'est le CSS, maîtriser la syntaxe CSS, les sélecteurs de base, et les différentes méthodes d'intégration pour styler vos pages web professionnellement.

Théorie​

Qu'est-ce que le CSS ?​

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

Rôle :

  • ✅ Définit l'apparence d'une page web
  • ✅ Sépare le contenu (HTML) de la présentation (CSS)
  • ✅ Permet la mise en page, les couleurs, les polices, etc.

Analogie : Si HTML est la charpente d'une maison, CSS est la décoration (peinture, meubles, style).

Syntaxe CSS​

Structure de base :

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

Exemple :

h1 {
    color: blue;
    font-size: 32px;
}

Composants :

  • Sélecteur : Quel élément styler (h1)
  • Propriété : Quelle caractéristique modifier (color)
  • Valeur : Nouvelle valeur (blue)
  • Déclaration : propriété: valeur; (terminée par ;)

Méthodes d'intégration​

1. CSS inline​

Dans l'attribut style :

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

Avantages :

  • Rapide pour tests
  • Spécificité maximale

Inconvénients :

  • ❌ Pas réutilisable
  • ❌ Difficile à maintenir
  • ❌ Mélange HTML et CSS

Quand utiliser : Rarement, seulement pour des cas très spécifiques.

2. CSS interne (<style>)​

Dans le <head> :

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

Avantages :

  • ✅ Tout au même endroit
  • ✅ Pas de fichier externe

Inconvénients :

  • ❌ Pas réutilisable entre pages
  • ❌ Mélange HTML et CSS

Quand utiliser : Petits projets, prototypes.

3. CSS externe (recommandé)​

Fichier séparé style.css :

/* style.css */
h1 {
    color: blue;
}

Lien dans le HTML :

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

Avantages :

  • ✅ Réutilisable (plusieurs pages)
  • ✅ Séparation HTML/CSS
  • ✅ Cache navigateur
  • ✅ Maintenable

Quand utiliser : Toujours pour les projets réels.

4. Import CSS​

Dans un fichier CSS :

@import url('autre-style.css');

Dans le HTML (déprécié) :

<style>
    @import url('style.css');
</style>

Inconvénients :

  • ❌ Bloque le chargement
  • ❌ Moins performant que <link>

Quand utiliser : Rarement, préférer <link>.

Sélecteurs de base​

Sélecteur d'élément​

Sélectionne tous les éléments d'un type :

p {
    color: blue;
}
/* Tous les <p> seront bleus */

Sélecteur de classe​

Sélectionne les éléments avec une classe :

.texte-important {
    font-weight: bold;
}

HTML :

<p class="texte-important">Texte important</p>

Plusieurs classes :

<p class="texte-important rouge">Texte</p>

Sélecteur d'ID​

Sélectionne un élément avec un ID unique :

#header {
    background-color: gray;
}

HTML :

<header id="header">...</header>

Important : Un seul ID par page, pas réutilisable.

Sélecteur universel​

Sélectionne tous les éléments :

* {
    margin: 0;
    padding: 0;
}

Utilisation : Reset CSS, normalisation.

Sélecteur de descendant​

Sélectionne les descendants :

nav a {
    color: blue;
}
/* Tous les <a> dans <nav> */

Sélecteur d'enfant direct​

Sélectionne les enfants directs :

ul > li {
    list-style: none;
}
/* Seulement les <li> enfants directs de <ul> */

Sélecteur d'adjacent​

Sélectionne l'élément adjacent :

h1 + p {
    margin-top: 0;
}
/* Le <p> qui suit directement <h1> */

Sélecteur de frère général​

Sélectionne tous les frères suivants :

h2 ~ p {
    color: gray;
}
/* Tous les <p> qui suivent <h2> */

Commentaires CSS​

/* Commentaire sur une ligne */

/* Commentaire
   sur plusieurs
   lignes */

Unités CSS​

Unités absolues​

font-size: 16px;  /* Pixels */
font-size: 12pt;  /* Points (impression) */
font-size: 1cm;   /* Centimètres */

Unités relatives​

font-size: 1em;    /* Relative à la taille du parent */
font-size: 1rem;   /* Relative à la racine (html) */
font-size: 100%;   /* Pourcentage */
width: 50vw;       /* 50% de la largeur du viewport */
height: 50vh;      /* 50% de la hauteur du viewport */

Recommandation : Utiliser rem pour la typographie, % ou vw/vh pour les layouts.

Exercices guidés​

Exercice 1 : Syntaxe de base​

Créez un fichier style.css et stylisez :

  • Tous les <h1> en bleu
  • Tous les <p> avec une taille de 16px
  • Un élément avec classe .important en gras

Exercice 2 : Méthodes d'intégration​

Testez les 3 méthodes :

  1. CSS inline sur un élément
  2. CSS interne dans <style>
  3. CSS externe avec <link>

Observez les différences.

Exercice 3 : Sélecteurs de base​

Créez des styles avec :

  • Sélecteur d'élément (p)
  • Sélecteur de classe (.ma-classe)
  • Sélecteur d'ID (#mon-id)
  • Sélecteur descendant (nav a)

Exercice 4 : Sélecteurs avancés​

Créez des styles avec :

  • Sélecteur d'enfant direct (ul > li)
  • Sélecteur d'adjacent (h1 + p)
  • Sélecteur de frère général (h2 ~ p)

Exercice 5 : Structure complète​

Créez une page HTML avec :

  • CSS externe
  • Plusieurs sélecteurs
  • Commentaires dans le CSS
  • Organisation claire

❌ Erreurs fréquentes​

Erreur 1 : Oublier le point-virgule​

❌ Mauvais :

h1 {
    color: blue
    font-size: 32px
}

✅ Bon :

h1 {
    color: blue;
    font-size: 32px;
}

Pourquoi : Le ; termine chaque déclaration.

Erreur 2 : CSS inline partout​

❌ Mauvais :

<p style="color: blue;">Texte 1</p>
<p style="color: blue;">Texte 2</p>
<p style="color: blue;">Texte 3</p>

✅ Bon :

<p class="bleu">Texte 1</p>
<p class="bleu">Texte 2</p>
<p class="bleu">Texte 3</p>
.bleu {
    color: blue;
}

Pourquoi : Réutilisabilité et maintenabilité.

Erreur 3 : Confondre classe et ID​

❌ Mauvais :

<div id="header">...</div>
<div id="header">...</div> <!-- Erreur : ID dupliqué -->

✅ Bon :

<div class="header">...</div>
<div class="header">...</div> <!-- OK : classe réutilisable -->

Pourquoi : ID = unique, classe = réutilisable.

Erreur 4 : Sélecteur trop spécifique​

❌ Mauvais :

body div.container section article p {
    color: blue;
}

✅ Bon :

.article p {
    color: blue;
}

Pourquoi : Plus simple, plus maintenable.

Erreur 5 : Oublier les unités​

❌ Mauvais :

font-size: 16; /* Sans unité */

✅ Bon :

font-size: 16px;
font-size: 1rem;

Pourquoi : Les unités sont obligatoires (sauf pour 0).

🚀 Mini-projet​

Mission : Créer votre première feuille de style

Créez un fichier style.css et stylisez une page HTML :

Styles à créer :

  1. Reset de base (* { margin: 0; padding: 0; })
  2. Style pour <body> (police, couleur de fond)
  3. Styles pour les titres (h1, h2, h3)
  4. Styles pour les paragraphes
  5. Classes utilitaires (.texte-important, .centré)
  6. Styles pour la navigation

Structure :

  • CSS externe (fichier séparé)
  • Commentaires pour organiser
  • Sélecteurs variés (éléments, classes, descendants)

Critères :

  • ✅ CSS externe utilisé
  • ✅ Syntaxe correcte (point-virgules)
  • ✅ Sélecteurs variés
  • ✅ Code organisé et commenté
  • ✅ Page stylisée professionnellement

Objectif : Maîtriser les fondamentaux CSS et créer votre première feuille de style complète.

Validation : Vous pouvez passer au module suivant quand vous maîtrisez la syntaxe CSS, les sélecteurs de base, et avez créé une feuille de style externe fonctionnelle.