Aller au contenu

Le CSS

Le CSS (Cascading Style Sheets ou Feuilles de Style en Cascade) est le langage qui permet de mettre en forme les pages HTML. Il gère les couleurs, les polices, les espacements, la disposition des éléments, etc.

Qu'est-ce que le CSS ?

Le CSS n'est pas un langage de programmation, c'est un langage de mise en forme. Il vient compléter le HTML :

  • HTML = Structure et contenu (le squelette)
  • CSS = Présentation et apparence (l'habillage)

Pourquoi séparer HTML et CSS ?

  1. Maintenabilité : Modifier l'apparence sans toucher au contenu
  2. Réutilisabilité : Un même fichier CSS pour plusieurs pages
  3. Performances : Le CSS est mis en cache par le navigateur
  4. Clarté : Code plus lisible et organisé

Intégrer du CSS

Il existe trois façons d'ajouter du CSS à une page HTML :

1. CSS en ligne (inline) - À éviter

Directement dans l'attribut style d'une balise :

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

Inconvénient : Mélange contenu et présentation, difficile à maintenir.

2. CSS interne (dans le head)

Dans une balise <style> dans le <head> :

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

Utilité : Pour des styles spécifiques à une seule page.

3. CSS externe (fichier séparé) - Recommandé

Dans un fichier .css séparé, lié avec <link> :

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

Fichier style.css : 

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

Avantage : Séparation claire, réutilisable, mise en cache.

Syntaxe CSS

Une règle CSS est composée de :

selecteur {
    propriete: valeur;
    propriete2: valeur2;
}

Exemple

h1 {
    color: blue;
    font-size: 32px;
    text-align: center;
}
  • Sélecteur : h1 (cible tous les titres h1)
  • Propriétés : color, font-size, text-align
  • Valeurs : blue, 32px, center

Important : Chaque déclaration se termine par un point-virgule ;

Les sélecteurs

Les sélecteurs permettent de cibler les éléments HTML à styliser.

Sélecteurs de base

Sélecteur Exemple Cible
Élément p Tous les <p>
Classe .rouge Tous les éléments avec class="rouge"
ID #menu L'élément avec id="menu"
Universel * Tous les éléments

Exemples

<p>Paragraphe normal</p>
<p class="important">Paragraphe important</p>
<p id="intro">Introduction unique</p>

/* Tous les paragraphes */
p {
    font-family: Arial;
}

/* Éléments avec la classe "important" */
.important {
    color: red;
    font-weight: bold;
}

/* L'élément avec l'id "intro" */
#intro {
    font-size: 20px;
    background-color: yellow;
}

Sélecteurs combinés

/* Descendant : p à l'intérieur de div */
div p {
    color: blue;
}

/* Enfant direct : p directement dans div */
div > p {
    color: green;
}

/* Plusieurs sélecteurs, mêmes styles */
h1, h2, h3 {
    font-family: Georgia;
}

/* Élément avec une classe spécifique */
p.important {
    border: 1px solid red;
}

Pseudo-classes

Les pseudo-classes ciblent un état particulier d'un élément :

/* Lien non visité */
a:link {
    color: blue;
}

/* Lien visité */
a:visited {
    color: purple;
}

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

/* Lors du clic */
a:active {
    color: orange;
}

/* Premier enfant */
li:first-child {
    font-weight: bold;
}

/* Dernier enfant */
li:last-child {
    color: gray;
}

Les couleurs

Différentes notations

/* Nom de couleur */
color: red;
color: blue;
color: darkgreen;

/* Hexadécimal (#RRGGBB) */
color: #FF0000;    /* Rouge */
color: #00FF00;    /* Vert */
color: #0000FF;    /* Bleu */
color: #FFFFFF;    /* Blanc */
color: #000000;    /* Noir */

/* Hexadécimal court (#RGB) */
color: #F00;       /* Rouge (#FF0000) */

/* RGB (Red, Green, Blue) : 0-255 */
color: rgb(255, 0, 0);      /* Rouge */
color: rgb(128, 128, 128);  /* Gris */

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

/* HSL (Teinte, Saturation, Luminosité) */
color: hsl(0, 100%, 50%);     /* Rouge */

Propriétés utilisant les couleurs

color: red;                     /* Couleur du texte */
background-color: yellow;       /* Couleur de fond */
border-color: black;            /* Couleur de bordure */

Le texte

Police de caractères

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

/* Taille */
font-size: 16px;
font-size: 1.2em;    /* Relatif à la taille parente */
font-size: 1.2rem;   /* Relatif à la taille racine (html) */

/* Graisse (épaisseur) */
font-weight: normal;    /* 400 */
font-weight: bold;      /* 700 */
font-weight: 300;       /* Léger */

/* Style */
font-style: normal;
font-style: italic;

Alignement et décoration

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

/* Décoration */
text-decoration: none;          /* Supprime le soulignement */
text-decoration: underline;     /* Souligne */
text-decoration: line-through;  /* Barré */

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

Espacement

/* Interligne */
line-height: 1.5;
line-height: 24px;

/* Espacement entre les lettres */
letter-spacing: 2px;

/* Espacement entre les mots */
word-spacing: 5px;

/* Retrait de première ligne */
text-indent: 30px;

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

Tout élément HTML est considéré comme une boîte rectangulaire composée de plusieurs couches :

┌─────────────────────────────────────┐
│             margin                  │  ← Marge externe
│  ┌───────────────────────────────┐  │
│  │          border               │  │  ← Bordure
│  │  ┌─────────────────────────┐  │  │
│  │  │        padding          │  │  │  ← Marge interne
│  │  │  ┌───────────────────┐  │  │  │
│  │  │  │     content       │  │  │  │  ← Contenu
│  │  │  └───────────────────┘  │  │  │
│  │  └─────────────────────────┘  │  │
│  └───────────────────────────────┘  │
└─────────────────────────────────────┘

Les propriétés

/* Contenu */
width: 300px;
height: 200px;

/* Marge interne (padding) */
padding: 20px;                    /* Les 4 côtés */
padding: 10px 20px;               /* Vertical | Horizontal */
padding: 10px 20px 15px 25px;     /* Haut | Droite | Bas | Gauche */
padding-top: 10px;
padding-right: 20px;
padding-bottom: 15px;
padding-left: 25px;

/* Bordure */
border: 1px solid black;          /* Épaisseur | Style | Couleur */
border-width: 2px;
border-style: solid;              /* solid, dashed, dotted, double... */
border-color: red;
border-radius: 10px;              /* Coins arrondis */

/* Marge externe (margin) */
margin: 20px;                     /* Les 4 côtés */
margin: 10px 20px;                /* Vertical | Horizontal */
margin: 0 auto;                   /* Centrer horizontalement */
margin-top: 10px;

Box-sizing

Par défaut, width et height ne concernent que le contenu. Pour inclure padding et border :

/* Recommandé : appliquer à tous les éléments */
* {
    box-sizing: border-box;
}

Les dimensions et unités

Unités absolues

Unité Description
px Pixels
cm, mm Centimètres, millimètres
pt Points (1pt = 1/72 inch)

Unités relatives

Unité Description
% Pourcentage du parent
em Relatif à la taille de police du parent
rem Relatif à la taille de police de <html>
vw 1% de la largeur de la fenêtre
vh 1% de la hauteur de la fenêtre

Exemples

/* Largeur fixe */
width: 300px;

/* Largeur relative au parent */
width: 50%;

/* Largeur relative à la fenêtre */
width: 80vw;

/* Largeur maximale */
max-width: 1200px;

/* Largeur minimale */
min-width: 300px;

Les bordures et arrondis

/* Bordure simple */
border: 2px solid black;

/* Bordure par côté */
border-top: 3px dashed red;
border-bottom: 1px dotted blue;

/* Coins arrondis */
border-radius: 10px;              /* Tous les coins */
border-radius: 10px 20px;         /* Haut-gauche/Bas-droite | Haut-droite/Bas-gauche */
border-radius: 50%;               /* Cercle parfait (si carré) */

/* Ombre de boîte */
box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
/* Décalage-X | Décalage-Y | Flou | Couleur */

Les arrière-plans

/* Couleur de fond */
background-color: lightblue;

/* Image de fond */
background-image: url('image.jpg');

/* Répétition */
background-repeat: no-repeat;
background-repeat: repeat-x;
background-repeat: repeat-y;

/* Position */
background-position: center;
background-position: top right;
background-position: 50% 50%;

/* Taille */
background-size: cover;     /* Couvre tout l'élément */
background-size: contain;   /* Image entière visible */
background-size: 100px 200px;

/* Raccourci */
background: url('image.jpg') no-repeat center/cover;

L'affichage (display)

La propriété display contrôle le comportement d'affichage :

/* Bloc : prend toute la largeur, retour à la ligne avant/après */
display: block;       /* div, p, h1... */

/* En ligne : prend juste la place du contenu, pas de retour à la ligne */
display: inline;      /* span, a, strong... */

/* En ligne-bloc : comme inline mais accepte width/height */
display: inline-block;

/* Masquer un élément */
display: none;

Différences block vs inline

Propriété Block Inline
Largeur 100% du parent Contenu seulement
Hauteur Ajustable Contenu seulement
Retour à la ligne Oui Non
Margin/Padding Tous les côtés Gauche/Droite seulement

Le positionnement

Position static (par défaut)

position: static;   /* Flux normal du document */

Position relative

L'élément reste dans le flux mais peut être décalé :

position: relative;
top: 20px;      /* Décale de 20px vers le bas */
left: 10px;     /* Décale de 10px vers la droite */

Position absolute

L'élément sort du flux et se positionne par rapport à son parent positionné :

.parent {
    position: relative;  /* Référence pour l'enfant */
}

.enfant {
    position: absolute;
    top: 0;
    right: 0;    /* Coin supérieur droit du parent */
}

Position fixed

L'élément reste fixe par rapport à la fenêtre :

.menu-fixe {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}

Position sticky

Hybride entre relative et fixed :

.titre {
    position: sticky;
    top: 0;   /* Reste collé en haut lors du défilement */
}

Flexbox (disposition flexible)

Flexbox permet de créer des mises en page flexibles facilement.

Conteneur flex

.conteneur {
    display: flex;
}

Direction des éléments

flex-direction: row;            /* En ligne (défaut) */
flex-direction: row-reverse;    /* En ligne inversée */
flex-direction: column;         /* En colonne */
flex-direction: column-reverse; /* En colonne inversée */

Alignement horizontal (axe principal)

justify-content: flex-start;    /* Au début */
justify-content: flex-end;      /* À la fin */
justify-content: center;        /* Au centre */
justify-content: space-between; /* Espace entre les éléments */
justify-content: space-around;  /* Espace autour des éléments */
justify-content: space-evenly;  /* Espace égal partout */

Alignement vertical (axe secondaire)

align-items: stretch;       /* Étiré (défaut) */
align-items: flex-start;    /* En haut */
align-items: flex-end;      /* En bas */
align-items: center;        /* Au centre */

Retour à la ligne

flex-wrap: nowrap;    /* Pas de retour (défaut) */
flex-wrap: wrap;      /* Retour à la ligne */

Exemple : centrer un élément

.conteneur {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

Ressource : Flexbox Froggy pour s'entraîner de façon ludique.

Les transitions et animations

Transitions

Les transitions permettent d'animer le changement d'une propriété :

.bouton {
    background-color: blue;
    transition: background-color 0.3s ease;
}

.bouton:hover {
    background-color: red;
}

Syntaxe complète : 

transition: propriété durée fonction délai;
transition: all 0.5s ease-in-out 0.1s;

Fonctions de timing : - ease : Lent-rapide-lent (défaut) - linear : Vitesse constante - ease-in : Démarre lentement - ease-out : Finit lentement - ease-in-out : Lent aux deux extrémités

Animations

/* Définir l'animation */
@keyframes apparition {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Appliquer l'animation */
.element {
    animation: apparition 1s ease forwards;
}

Les transformations

/* Déplacement */
transform: translateX(50px);
transform: translateY(20px);
transform: translate(50px, 20px);

/* Rotation */
transform: rotate(45deg);

/* Échelle (zoom) */
transform: scale(1.5);      /* Agrandit de 50% */
transform: scale(0.5);      /* Réduit de 50% */

/* Inclinaison */
transform: skew(10deg);

/* Combinaisons */
transform: rotate(45deg) scale(1.2) translateX(10px);

Bonnes pratiques CSS

  1. Organiser son code avec des commentaires 

    /* ============= HEADER ============= */
/* ============= NAVIGATION ============= */
/* ============= CONTENU ============= */

  2. Utiliser des classes plutôt que des IDs pour plus de flexibilité

  3. Éviter les sélecteurs trop spécifiques 

    /* Éviter */
div.container ul li a.link { }

/* Préférer */
.nav-link { }

  4. Utiliser des noms de classes descriptifs 

    /* Éviter */
.rouge { }
.grand { }

/* Préférer */
.bouton-principal { }
.titre-section { }

  5. Réinitialiser les styles par défaut 

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

  6. Mobile-first : Concevoir d'abord pour mobile, puis adapter pour écrans larges

Exercices

Exercice 1 : Premiers styles

Créez un fichier style.css qui : - Change la couleur de fond de la page en gris clair (#f0f0f0) - Met tous les titres h1 en bleu et centrés - Met tous les paragraphes en police Arial avec une taille de 16px

Exercice 2 : Les classes

Créez les styles pour : - Une classe .important qui met le texte en rouge et en gras - Une classe .encadre qui ajoute une bordure noire de 2px et un padding de 10px - Une classe .arrondi qui ajoute des coins arrondis de 15px

Exercice 3 : Navigation

Créez un menu de navigation horizontal avec : - Une liste <ul> avec display: flex - Les liens sans soulignement - Un effet au survol (changement de couleur)

Exercice 4 : Carte de présentation

Créez une "carte" de présentation avec : - Une largeur de 300px - Une ombre légère - Des coins arrondis - Une image en haut - Un titre et un paragraphe en dessous - Un bouton stylisé

Exercice 5 : Centrage Flexbox

Créez une page avec un élément parfaitement centré (horizontalement et verticalement) en utilisant Flexbox.

Exercice 6 : Mise en page complète

Créez une mise en page avec : - Un header fixe en haut - Un menu de navigation - Un contenu principal à deux colonnes (70% contenu, 30% barre latérale) - Un footer en bas

Voir la correction

Ressources

Auteur : Florian Mathieu

Licence CC BY NC

Licence Creative Commons
Ce cours est mis à disposition selon les termes de la Licence Creative Commons Attribution - Pas d'Utilisation Commerciale - Partage dans les Mêmes Conditions 4.0 International.