Rappel sur le CSS¶

Le CSS (Cascading Style Sheets) est un langage de feuille de style utilisé pour décrire la présentation visuelle d'un document écrit en HTML. Il permet de séparer le contenu (HTML) de sa mise en forme (CSS), rendant ainsi le code plus maintenable et réutilisable.

Pourquoi utiliser le CSS ?¶

Séparation des préoccupations : Le HTML structure le contenu, le CSS gère l'apparence
Réutilisabilité : Un même fichier CSS peut styler plusieurs pages
Maintenabilité : Modifier le design devient plus simple et rapide
Performance : Le navigateur peut mettre en cache les fichiers CSS
Accessibilité : Permet d'adapter l'affichage selon les besoins des utilisateurs

Comment intégrer le CSS dans vos pages ?¶

Il existe trois méthodes pour appliquer du CSS à une page HTML :

1. CSS externe (recommandé)¶

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <!-- Votre contenu -->
</body>
</html>

Avantages : Réutilisable, maintenable, séparation claire

2. CSS interne¶

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            background-color: #f0f0f0;
        }
    </style>
</head>
<body>
    <!-- Votre contenu -->
</body>
</html>

Avantages : Tout dans un fichier, utile pour des styles spécifiques à une page

3. CSS inline (à éviter)¶

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

Inconvénients : Difficile à maintenir, mélange HTML et CSS, non réutilisable

Syntaxe de base du CSS¶

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

Exemple :

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

Les sélecteurs CSS¶

Sélecteurs de base¶

Sélecteur	Syntaxe	Exemple	Description
Élément	`element`	`p { }`	Sélectionne tous les `<p>`
Classe	`.classe`	`.menu { }`	Sélectionne tous les éléments avec `class="menu"`
ID	`#identifiant`	`#header { }`	Sélectionne l'élément avec `id="header"`
Universel	`*`	`* { }`	Sélectionne tous les éléments

Exemples :

<!-- HTML -->
<p>Paragraphe normal</p>
<p class="important">Paragraphe important</p>
<p id="intro">Paragraphe d'introduction</p>

/* CSS */
p {
    color: black;
}

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

#intro {
    font-size: 20px;
    background-color: #ffffcc;
}

Sélecteurs combinés¶

/* Sélecteur descendant : tous les <a> dans <nav> */
nav a {
    color: blue;
}

/* Sélecteur enfant direct : <li> directement dans <ul> */
ul > li {
    list-style-type: square;
}

/* Sélecteur frère adjacent : <p> juste après <h2> */
h2 + p {
    margin-top: 0;
}

/* Plusieurs sélecteurs : h1, h2 et h3 */
h1, h2, h3 {
    font-family: Arial, sans-serif;
}

Les couleurs en CSS¶

Formats de couleurs¶

/* Noms de couleurs */
color: red;
background-color: lightblue;

/* Hexadécimal */
color: #FF0000;        /* Rouge */
color: #F00;           /* Rouge (forme courte) */
color: #336699;        /* Bleu grisâtre */

/* RGB (Red, Green, Blue) */
color: rgb(255, 0, 0);           /* Rouge */
background-color: rgb(51, 102, 153);  /* Bleu grisâtre */

/* RGBA (avec transparence) */
background-color: rgba(255, 0, 0, 0.5);  /* Rouge semi-transparent */

/* HSL (Teinte, Saturation, Luminosité) */
color: hsl(0, 100%, 50%);        /* Rouge */
background-color: hsl(210, 50%, 40%);  /* Bleu */

Outil pratique : Utilisez Color Picker pour choisir vos couleurs

La typographie¶

Propriétés de police¶

/* Famille de police */
font-family: Arial, Helvetica, sans-serif;
font-family: "Times New Roman", Times, serif;

/* Taille de police */
font-size: 16px;      /* Pixels (fixe) */
font-size: 1.2em;     /* Relatif au parent */
font-size: 1.2rem;    /* Relatif à la racine */
font-size: 100%;      /* Pourcentage */

/* Poids de la police */
font-weight: normal;   /* 400 */
font-weight: bold;     /* 700 */
font-weight: 300;      /* Léger */
font-weight: 900;      /* Extra gras */

/* Style de la police */
font-style: normal;
font-style: italic;
font-style: oblique;

/* Décoration du texte */
text-decoration: none;           /* Pas de décoration */
text-decoration: underline;      /* Souligné */
text-decoration: line-through;   /* Barré */

/* Transformation du texte */
text-transform: uppercase;   /* MAJUSCULES */
text-transform: lowercase;   /* minuscules */
text-transform: capitalize;  /* Première Lettre En Majuscule */

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

/* Espacement */
line-height: 1.5;        /* Hauteur de ligne */
letter-spacing: 2px;     /* Espacement entre lettres */
word-spacing: 5px;       /* Espacement entre mots */

Exemple complet :

.article-title {
    font-family: 'Georgia', serif;
    font-size: 2rem;
    font-weight: bold;
    color: #333;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 1.4;
}

Le modèle de boîte (Box Model)¶

Chaque élément HTML est représenté comme une boîte rectangulaire composée de :

┌─────────────────────────────────────┐
│           MARGIN                    │
│  ┌──────────────────────────────┐   │
│  │        BORDER                │   │
│  │  ┌───────────────────────┐   │   │
│  │  │      PADDING          │   │   │
│  │  │  ┌────────────────┐   │   │   │
│  │  │  │    CONTENT     │   │   │   │
│  │  │  │   (largeur x   │   │   │   │
│  │  │  │    hauteur)    │   │   │   │
│  │  │  └────────────────┘   │   │   │
│  │  └───────────────────────┘   │   │
│  └──────────────────────────────┘   │
└─────────────────────────────────────┘

Propriétés du Box Model¶

/* Largeur et hauteur */
width: 300px;
height: 200px;
max-width: 100%;      /* Largeur maximale */
min-height: 150px;    /* Hauteur minimale */

/* Marges externes (margin) */
margin: 20px;                    /* Tous les côtés */
margin: 10px 20px;               /* Haut/Bas Gauche/Droite */
margin: 10px 20px 15px 25px;     /* Haut Droite Bas Gauche */
margin-top: 10px;
margin-right: 20px;
margin-bottom: 15px;
margin-left: 25px;
margin: 0 auto;                  /* Centrer horizontalement */

/* Espacement interne (padding) */
padding: 15px;                   /* Tous les côtés */
padding: 10px 20px;              /* Haut/Bas Gauche/Droite */
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;

/* Bordures */
border: 1px solid black;         /* Épaisseur style couleur */
border-width: 2px;
border-style: solid;             /* solid, dashed, dotted, double */
border-color: #333;
border-radius: 5px;              /* Coins arrondis */

/* Bordures individuelles */
border-top: 2px solid red;
border-right: 1px dashed blue;
border-bottom: 3px dotted green;
border-left: 1px solid black;

Exemple :

.card {
    width: 300px;
    padding: 20px;
    margin: 10px auto;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

Les tableaux en CSS¶

/* Tableau de base */
table {
    width: 100%;
    border-collapse: collapse;  /* Fusionne les bordures */
    margin: 20px 0;
}

/* En-tête du tableau */
th {
    background-color: #4CAF50;
    color: white;
    padding: 12px;
    text-align: left;
    font-weight: bold;
}

/* Cellules du tableau */
td {
    padding: 10px;
    border: 1px solid #ddd;
}

/* Lignes alternées (zebra stripes) */
tr:nth-child(even) {
    background-color: #f9f9f9;
}

tr:nth-child(odd) {
    background-color: white;
}

/* Effet hover sur les lignes */
tr:hover {
    background-color: #f1f1f1;
    cursor: pointer;
}

Exemple HTML :

<table>
    <tr>
        <th>Nom</th>
        <th>Prénom</th>
        <th>Âge</th>
    </tr>
    <tr>
        <td>Dupont</td>
        <td>Jean</td>
        <td>25</td>
    </tr>
    <tr>
        <td>Martin</td>
        <td>Marie</td>
        <td>30</td>
    </tr>
</table>

Les pseudo-classes¶

Les pseudo-classes permettent de cibler des éléments dans des états spécifiques :

/* :hover - Survol de la souris */
a:hover {
    color: red;
    text-decoration: underline;
}

button:hover {
    background-color: #0056b3;
    transform: scale(1.05);
}

/* :active - Élément actif (clic) */
button:active {
    transform: scale(0.95);
}

/* :focus - Élément a le focus (champs de formulaire) */
input:focus {
    border-color: blue;
    outline: 2px solid lightblue;
}

/* :first-child et :last-child */
li:first-child {
    font-weight: bold;
}

li:last-child {
    border-bottom: none;
}

/* :nth-child() */
tr:nth-child(2) {        /* Deuxième élément */
    background-color: yellow;
}

tr:nth-child(odd) {      /* Éléments impairs */
    background-color: #f0f0f0;
}

tr:nth-child(3n) {       /* Tous les 3 éléments */
    background-color: lightblue;
}

Le responsive design¶

Unités relatives¶

/* Unités absolues (à éviter pour le responsive) */
width: 500px;

/* Unités relatives (recommandées) */
width: 50%;              /* Pourcentage du parent */
font-size: 1.2em;        /* Relatif à la taille de police du parent */
font-size: 1.2rem;       /* Relatif à la taille de police de la racine */
padding: 2vw;            /* 2% de la largeur du viewport */
height: 50vh;            /* 50% de la hauteur du viewport */

Media Queries¶

Les media queries permettent d'appliquer des styles selon la taille de l'écran :

/* Styles de base (mobile-first) */
.container {
    width: 100%;
    padding: 10px;
}

/* Tablettes (768px et plus) */
@media screen and (min-width: 768px) {
    .container {
        width: 750px;
        margin: 0 auto;
    }
}

/* Ordinateurs (1024px et plus) */
@media screen and (min-width: 1024px) {
    .container {
        width: 960px;
    }
}

/* Grands écrans (1200px et plus) */
@media screen and (min-width: 1200px) {
    .container {
        width: 1140px;
    }
}

Points de rupture courants (breakpoints) :

Appareil	Largeur	Media Query
Mobile	< 768px	(par défaut)
Tablette	768px - 1023px	`@media (min-width: 768px)`
Desktop	1024px - 1199px	`@media (min-width: 1024px)`
Large Desktop	≥ 1200px	`@media (min-width: 1200px)`

Positionnement et mise en page¶

Display¶

/* Types d'affichage */
display: block;        /* Prend toute la largeur */
display: inline;       /* En ligne avec le texte */
display: inline-block; /* En ligne mais avec dimensions */
display: none;         /* Caché (pas d'espace) */
visibility: hidden;    /* Invisible (garde l'espace) */

Flexbox (recommandé pour les mises en page)¶

/* Container flex */
.container {
    display: flex;
    justify-content: center;      /* Alignement horizontal */
    align-items: center;          /* Alignement vertical */
    flex-direction: row;          /* Direction (row, column) */
    flex-wrap: wrap;              /* Retour à la ligne */
    gap: 20px;                    /* Espacement entre éléments */
}

/* Éléments flex */
.item {
    flex: 1;                      /* Croissance égale */
    flex-basis: 200px;            /* Largeur de base */
}

Grid (pour les mises en page complexes)¶

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);  /* 3 colonnes égales */
    grid-gap: 20px;
    padding: 20px;
}

/* Responsive grid */
@media (max-width: 768px) {
    .grid-container {
        grid-template-columns: 1fr;  /* 1 colonne sur mobile */
    }
}

Conseils pratiques pour CSS¶

1. Organisation du code¶

/* Commentez vos sections */

/* =============================
   STYLES GÉNÉRAUX
   ============================= */

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

/* =============================
   TYPOGRAPHIE
   ============================= */

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
}

/* =============================
   COMPOSANTS
   ============================= */

.button { /* ... */ }

2. Nommage des classes (BEM)¶

/* Block__Element--Modifier */

.card { }                    /* Block */
.card__title { }             /* Element */
.card__title--large { }      /* Modifier */
.card__button { }
.card__button--primary { }

3. Éviter la sur-spécificité¶

/* ❌ Mauvais : trop spécifique */
body div.container ul li a.link {
    color: blue;
}

/* ✅ Bon : simple et maintenable */
.nav-link {
    color: blue;
}

4. Utiliser des variables CSS¶

:root {
    --primary-color: #3498db;
    --secondary-color: #2ecc71;
    --font-size-base: 16px;
    --spacing-unit: 8px;
}

.button {
    background-color: var(--primary-color);
    font-size: var(--font-size-base);
    padding: calc(var(--spacing-unit) * 2);
}

Outils de débogage CSS¶

DevTools du navigateur¶

Inspecteur d'éléments : Clic droit > Inspecter
Visualiser le box model : Onglet "Computed" ou "Calculé"
Modifier le CSS en temps réel : Onglet "Styles"
Responsive Design Mode : Ctrl+Shift+M (Windows) / Cmd+Option+M (Mac)

Validateur CSS¶

Utilisez le W3C CSS Validator pour vérifier la validité de votre code.

Ressources pour apprendre¶

MDN Web Docs - CSS - Documentation complète
CSS-Tricks - Tutoriels et astuces
Can I Use - Compatibilité navigateurs
Flexbox Froggy - Jeu pour apprendre Flexbox
Grid Garden - Jeu pour apprendre CSS Grid