Introduction à CSS

Cascading Style Sheets

Formation DWWM - 2025 - 2026

Plan du cours

✓ C'est quoi, CSS ?
✓ Sélecteurs et spécificité
✓ Propriétés de base
✓ Texte et typographie

C'est quoi, CSS ?

Définition
Historique
Utilisations
Différentes façon d'intégrer CSS

Définition

CSS (Cascading Style Sheets) est un langage qui définit l'apparence des éléments HTML.

Il permet de styliser une page web : couleurs, polices, marges, positionnement, animations...
"Cascading" signifie que les styles sont appliqués selon un ordre de priorité.
CSS sépare le contenu (HTML) de la présentation (CSS)

/* Exemple de règle CSS */
h1 {
    color: blue;
    font-size: 24px;
}

Historique de CSS

1996 : Création de CSS1 par le W3C
- Premières propriétés de base (couleurs, polices, marges)
1998 : CSS2 introduit des fonctionnalités avancées
- Positionnement, media queries, z-index
2009-2011 : CSS3 apporte des révolutions
- Flexbox, animations, transitions, responsive design
Aujourd'hui : Évolutions constantes
- CSS Grid, variables CSS, nouvelles propriétés régulièrement ajoutées

Utilisations de CSS

1Mise en page : disposition des éléments avec Flexbox et Grid
2Design et personnalisation : couleurs, typographies, bordures, ombres...
3Effets visuels : transitions, animations, transformations
4Responsive Design : adaptation aux écrans mobiles, tablettes et ordinateurs
5Accessibilité : amélioration de l'expérience utilisateur avec des styles adaptés

Différentes façons d'intégrer CSS (1/3)

1CSS en ligne (Inline CSS)

Ajouté directement dans la balise HTML via l'attribut style :

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

✅ Avantages : rapide pour un style unique

❌ Inconvénients : difficile à maintenir, ne respecte pas la séparation contenu/présentation

Différentes façons d'intégrer CSS (2/3)

2CSS interne (Internal CSS)

Ajouté dans la balise <style> dans le <head> du document HTML :

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

✅ Avantages : mieux organisé qu'inline

❌ Inconvénients : devient compliqué sur un grand projet

Différentes façons d'intégrer CSS (3/3)

3CSS externe (External CSS) ✅ (meilleure pratique)

Défini dans un fichier .css séparé, puis lié via <link> :

📄 Dans le fichier HTML (index.html) :

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

🎨 Dans le fichier CSS (style.css) :

p {
    color: blue;
    font-size: 20px;
}

✅ Avantages : organisation optimale, réutilisable sur plusieurs pages, meilleure maintenance

Sélecteurs et spécificité

Sélecteurs de base
Sélecteurs avancés
Pseudo-classes et pseudo-éléments
Notion de cascade et spécificité

Sélecteurs de base

Sélecteur	Utilisation	Exemple
`*`	Sélectionne tous les éléments	`* { margin: 0; }`
`élément`	Sélectionne un type d'élément	`p { color: red; }`
`.classe`	Sélectionne tous les éléments avec cette classe	`.title { font-size: 18px; }`
`#id`	Sélectionne un élément unique	`#header { background: black; }`

Sélecteurs avancés

Sélecteur	Description	Exemple
`élément1, élément2`	Sélectionne plusieurs éléments	`h1, h2 { color: blue; }`
`élément1 élément2`	Sélectionne élément2 à l'intérieur de élément1	`div p { color: green; }`
`élément1 > élément2`	Sélectionne élément2 directement enfant de élément1	`div > p { color: red; }`
`élément1 + élément2`	Sélectionne élément2 immédiatement après élément1	`h1 + p { color: gray; }`

Pseudo-classes et pseudo-éléments

Pseudo-classes (changent l'état d'un élément) :

a:hover { color: red; } /* Quand la souris passe sur un lien */
input:focus { border: 2px solid blue; } /* Quand un champ est actif */

Pseudo-éléments (ciblent une partie d'un élément) :

p::first-letter { 
    font-size: 30px; 
} /* Première lettre d'un paragraphe */

p::before { 
    content: "✨"; 
} /* Ajoute une icône avant un paragraphe */

Notion de cascade et spécificité

CSS suit une règle de priorité basée sur la spécificité :

                !important → le plus prioritaire (⚠️ à utiliser avec parcimonie)
Sélecteur ID (#id) → spécificité de 100
Sélecteur de classe (.classe), d'attribut et pseudo-classes → spécificité de 10
Sélecteur d'élément (p, h1, div...) → spécificité de 1

            

Exemple :

p { color: blue; } /* 0,0,1 */
#monParagraphe { color: red; } /* 1,0,0 -> prioritaire */

Propriétés de base

Couleurs et fonds
Tailles et unités
Marges, padding, bordures
Le Box Model

Couleurs et fonds

Différentes façons de définir les couleurs :

h1 {
    color: red; /* Nom de couleur */
    color: #ff0000; /* Hexadécimal */
    color: rgb(255, 0, 0); /* RGB */
    color: rgba(255, 0, 0, 0.5); /* RGBA avec transparence */
}

Propriétés de fond :

body {
    background-color: lightblue;
    background-image: url("image.jpg");
    background-size: cover;
}

Tailles et unités (1/2)

1Unités Absolues (fixes, indépendantes du contexte)

px (pixels) → Taille fixe, ne s'adapte pas au zoom
cm, mm, in → Utilisées rarement, surtout pour l'impression

2Unités Relatives (s'adaptent au contexte) ⭐

em → Basé sur la taille de police de l'élément parent
rem → Basé sur la taille de police de html (recommandé)
% → Proportionnel à l'élément parent
vw, vh → Viewport Width/Height (1vw = 1% de la largeur de l'écran)

Tailles et unités (2/2)

✅ Bonnes pratiques :

Privilégier rem pour la scalabilité et l'accessibilité
Utiliser vh/vw pour des mises en page responsive
Éviter les unités absolues (px, cm) sauf si nécessaire

p { 
    font-size: 16px; /* Taille fixe */
}

h1 { 
    font-size: 2em; /* 2 fois la taille du parent */
}

.container { 
    width: 80%; /* 80% de la largeur du parent */
}

Marges (margin)

Espace extérieur entre un élément et les autres autour de lui
Ne change pas la taille de l'élément
Peut être défini en px, em, %, auto...

margin-left: auto; et margin-right: auto; → Centre un élément horizontalement (si largeur définie)

div {
    margin: 20px; /* Marge de 20px sur les 4 côtés */
    margin-top: 10px; /* Marge uniquement en haut */
    margin: 10px auto; /* Centrage horizontal */
}

Padding (espacement interne)

Espace intérieur entre le contenu et la bordure d'un élément
Augmente la taille de l'élément (sauf si box-sizing: border-box; est activé)

div {
    padding: 15px; /* Padding uniforme */
    padding: 10px 20px; /* 10px haut/bas, 20px gauche/droite */
}

Démo visuelle :

Le padding crée de l'espace entre ce texte et la bordure bleue

Bordures (border)

Contour visible d'un élément
Définie par épaisseur, style et couleur

div {
    border: 2px solid black; /* Bordure noire pleine de 2px */
    border-radius: 10px; /* Coins arrondis */
}

Styles de bordures :

solid

dotted

dashed

double

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

Largeur totale d'un élément = width + padding + border + margin

CONTENU

✅ Utiliser box-sizing: border-box; pour inclure padding et border dans la largeur !

🎮 Exercice 1 : Propriétés de base

⏱️ Durée : 15 minutes

🎯 Objectif

Appliquer des styles de base à une page Pokémon avec couleurs, bordures et dimensions

📝 Consignes

Récupérez l'image de Pikachu sur Pokepedia (clic droit > copier l'adresse de l'image)
Donnez à la page une couleur de fond gris clair (#f5f5f5)
Pour les articles décrivant les Pokémon :
- Bordure pleine de 2px, couleur #888888, arrondissement 5px
- Marges internes et externes de 10px
Donnez au titre principal de chaque article une couleur #e63946
Ajoutez une classe pokemon-img à l'image de Pikachu
Faites en sorte que l'image fasse 120px de largeur

✅ Correction Exercice 1 - Partie HTML

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Pokédex</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Mon Pokédex</h1>
    
    <!-- Article Pikachu -->
    <article id="pikachu">
        <h2>Pikachu</h2>
        <img src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/25.png" 
             alt="Pikachu" class="pokemon-img">
        <p>Pokémon souris de type Électrik.</p>
    </article>
</body>
</html>

✅ Correction Exercice 1 - Partie CSS

/* Couleur de fond de la page */
body {
    background-color: #f5f5f5;
}

/* Styles des articles Pokémon */
article {
    border: 2px solid #888888;
    border-radius: 5px;
    margin: 10px;
    padding: 10px;
}

/* Couleur du titre principal */
article h2 {
    color: #e63946;
}

/* Dimension de l'image */
.pokemon-img {
    width: 120px;
}

Texte et typographie

Police d'écriture
Taille et graisse du texte
Style du texte
Espacement
Alignement du texte
Décoration et transformation

Police d'écriture (font-family)

Définit la police utilisée pour un texte
Utilisation de polices standards (Arial, Times, Verdana...) ou Google Fonts
Toujours prévoir une police de secours (fallback)

p {
    font-family: "Poppins", Arial, sans-serif;
}

Noms de police génériques :

sans-serif → Police sans empattement (moderne)
serif → Police avec empattement (classique)
monospace → Police à largeur fixe (code)

Taille et graisse du texte

Taille (font-size)

h1 { 
    font-size: 2rem; /* Basé sur la taille de font de html */
}

Graisse (font-weight)

Définit l'épaisseur de la police

p { 
    font-weight: 700; /* Plus épais (100-900) */
    font-weight: bold; /* Gras */
    font-weight: normal; /* Normal */
}

Style et espacement

Style du texte (font-style)

em { 
    font-style: italic; /* Italique */
}

Espacement

p {
    line-height: 1.6; /* Espace entre les lignes */
    letter-spacing: 0.05em; /* Espace entre les lettres */
    word-spacing: 0.1em; /* Espace entre les mots */
}

Alignement et transformation

Alignement du texte (text-align)

p { 
    text-align: justify; /* left, right, center, justify */
}

Décoration et transformation

a { 
    text-decoration: none; /* Supprime le soulignement */
}

h1 { 
    text-transform: uppercase; /* MAJUSCULES */
}

Les variables CSS (Custom Properties)

Les variables CSS permettent de stocker des valeurs réutilisables :

:root {
    --main-color: #3498db;
    --font-size: 16px;
}

body {
    color: var(--main-color);
    font-size: var(--font-size);
}

✅ Pourquoi utiliser :root ?

Permet de définir des variables globales
Facilite la maintenance du code
Améliore la flexibilité du design

🎮 Exercice 2 : Typographie et variables

⏱️ Durée : 25 minutes

🎯 Objectif

Créer une page Pokémon complète avec types colorés, variables CSS et typographie

📝 Consignes

Récupérez les images de Papilusion et Carapuce sur Pokepedia (voir données)
Intégrez les articles pour Papilusion et Carapuce (avec liens de navigation)
Ajoutez la classe du type à chaque Pokémon : electric, water, bug, fly
Définir en CSS une couleur de fond pour chaque type (voir données)
Pour Papilusion (2 types), créez un dégradé avec les 2 couleurs
Mettez tous les codes couleur dans des variables CSS
Choisissez un Pokémon et donnez-lui une bordure rouge (#e63946) de 3px en ciblant son ID
Ajoutez une police sans empattement pour toute la page

📊 Données des Pokémon

Nom	N°	Types	Couleur de fond	Description
Pikachu	25	Électrik	#fac000	Souris électrique
Papilusion	12	Insecte, Vol	#a3c62c + #81b9ef	Pokémon papillon
Carapuce	7	Eau	#2980ef	Petite tortue

📌 Images :

Récupérez les images de Papilusion et Carapuce sur Pokepedia (clic droit > copier l'adresse de l'image)

✅ Correction Exercice 2 - Partie HTML

<!-- Article Papilusion -->
<article id="papilusion" class="bug fly">
    <h2>Papilusion</h2>
    <img src="https://raw.githubusercontent.com/.../12.png" 
         alt="Papilusion" class="pokemon-img">
    <p>Pokémon Papillon de type Insecte et Vol.</p>
</article>

<!-- Article Carapuce -->
<article id="carapuce" class="water">
    <h2>Carapuce</h2>
    <img src="https://raw.githubusercontent.com/.../7.png" 
         alt="Carapuce" class="pokemon-img">
    <p>Petite tortue de type Eau.</p>
</article>

✅ Correction Exercice 2 - Partie CSS

/* Variables CSS pour les couleurs */
:root {
    --electric-color: #fac000;
    --water-color: #2980ef;
    --bug-color: #a3c62c;
    --fly-color: #81b9ef;
    --border-highlight: #e63946;
}

/* Couleurs de fond par type */
.electric {
    background-color: var(--electric-color);
}

.water {
    background-color: var(--water-color);
}

/* Dégradé pour Papilusion (2 types) */
.bug.fly {
    background: linear-gradient(to right, var(--bug-color), var(--fly-color));
}

/* Bordure rouge pour un Pokémon spécifique */
#pikachu {
    border: 3px solid var(--border-highlight);
}

/* Police sans empattement */
body {
    font-family: Arial, Helvetica, sans-serif;
}

Récapitulatif 🎯

                Ce que vous avez appris aujourd'hui :
                ✓ Qu'est-ce que CSS et comment l'intégrer
✓ Les sélecteurs CSS et la spécificité
✓ Les propriétés de base (couleurs, tailles, marges, padding, bordures)
✓ Le Box Model
✓ La typographie et les polices
✓ Les variables CSS

            

🚀 Pour aller plus loin :

Flexbox et Grid pour les mises en page
Les animations et transitions CSS
Le Responsive Design avec les Media Queries

Merci ! 👏

Des questions ?

N'hésitez pas à pratiquer avec les exercices