Module 4.2 – CSS (style)

Objectif

Maîtriser le CSS pour styliser les pages web. Comprendre les sélecteurs, les propriétés de base (couleurs, tailles, marges), le positionnement et les bases du responsive design.

Théorie

Qu'est-ce que le CSS ?

CSS signifie "Cascading Style Sheets" (Feuilles de Style en Cascade).

Rôle du CSS :

Définit l'apparence d'une page web
Contrôle les couleurs, polices, espacements, layouts
Sépare le contenu (HTML) de la présentation (CSS)

Analogie : Si HTML est la charpente, CSS est la décoration intérieure.

Syntaxe CSS

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

Exemple :

h1 {
    color: blue;
    font-size: 24px;
    margin-bottom: 20px;
}

Intégrer CSS dans HTML

Méthode 1 : Fichier externe (recommandé)

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

Méthode 2 : Dans le <head>

<head>
    <style>
        h1 { color: blue; }
    </style>
</head>

Méthode 3 : Style inline (à éviter)

<h1 style="color: blue;">Titre</h1>

Sélecteurs

Les sélecteurs ciblent les éléments à styliser.

Sélecteur d'élément :

p { color: black; }
h1 { font-size: 32px; }

Sélecteur de classe :

.ma-classe { color: red; }

<p class="ma-classe">Texte rouge</p>

Sélecteur d'ID :

#mon-id { color: green; }

<p id="mon-id">Texte vert</p>

Sélecteur descendant :

div p { color: blue; }  /* Tous les <p> dans un <div> */

Sélecteur enfant direct :

div > p { color: blue; }  /* <p> enfant direct de <div> */

Couleurs

Noms de couleurs :

color: red;
color: blue;
color: green;

Hexadécimal :

color: #FF0000;  /* Rouge */
color: #00FF00;  /* Vert */
color: #0000FF;  /* Bleu */
color: #333333;  /* Gris foncé */

RGB :

color: rgb(255, 0, 0);      /* Rouge */
color: rgba(255, 0, 0, 0.5); /* Rouge avec transparence */

Tailles et polices

Taille de police :

font-size: 16px;    /* Pixels */
font-size: 1em;      /* Relatif à la taille parente */
font-size: 1rem;     /* Relatif à la racine */
font-size: 100%;     /* Pourcentage */

Famille de police :

font-family: Arial, sans-serif;
font-family: "Times New Roman", serif;
font-family: "Courier New", monospace;

Poids de police :

font-weight: normal;
font-weight: bold;
font-weight: 400;    /* 100-900 */

Marges et espacements

Le Box Model : Chaque élément est une boîte avec :

Content : Le contenu
Padding : Espace interne
Border : Bordure
Margin : Espace externe

.box {
    width: 200px;           /* Largeur du contenu */
    padding: 20px;          /* Espace interne */
    border: 2px solid black; /* Bordure */
    margin: 10px;           /* Espace externe */
}

Marges individuelles :

margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;

/* Raccourci : haut droite bas gauche */
margin: 10px 20px 30px 40px;

/* Raccourci : vertical horizontal */
margin: 10px 20px;

Padding : Même syntaxe que margin

Positionnement

Display :

display: block;      /* Prend toute la largeur */
display: inline;     /* Prend juste la place nécessaire */
display: inline-block; /* Mixte */
display: none;       /* Invisible */

Position :

position: static;    /* Par défaut */
position: relative;   /* Relatif à sa position normale */
position: absolute;   /* Relatif au parent positionné */
position: fixed;      /* Fixe par rapport à la fenêtre */

Flexbox (layout moderne) :

.container {
    display: flex;
    justify-content: center;  /* Alignement horizontal */
    align-items: center;      /* Alignement vertical */
    gap: 20px;                /* Espace entre éléments */
}

Grid (grille) :

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

Responsive Design

Adapter le style selon la taille d'écran avec les media queries.

/* Style par défaut */
.container {
    width: 100%;
}

/* Pour les écrans de plus de 768px */
@media (min-width: 768px) {
    .container {
        width: 750px;
        margin: 0 auto;
    }
}

/* Pour les écrans de plus de 1024px */
@media (min-width: 1024px) {
    .container {
        width: 1200px;
    }
}

Breakpoints courants :

Mobile : < 768px
Tablette : 768px - 1024px
Desktop : > 1024px

Exercice

Créer un fichier CSS
- Créez style.css
- Liez-le à votre index.html
- Ajoutez un style de base pour le body
Styliser les titres
- Donnez différentes couleurs aux h1, h2, h3
- Changez les tailles de police
- Ajoutez des marges
Créer des classes
- Créez une classe .important avec un style particulier
- Créez une classe .container pour centrer le contenu
- Appliquez-les dans votre HTML
Box Model
- Créez une div avec une classe .box
- Ajoutez padding, border, margin
- Observez l'espace occupé
Flexbox
- Créez un conteneur flex
- Placez 3 éléments à l'intérieur
- Centrez-les horizontalement et verticalement
Responsive
- Ajoutez une media query
- Changez la largeur d'un élément selon la taille d'écran
- Testez en redimensionnant la fenêtre

Quiz

Que signifie CSS ?
- Computer Style Sheets
- Cascading Style Sheets
- Creative Style System
Quel sélecteur cible une classe ?
- #ma-classe
- .ma-classe
- ma-classe
Que contrôle le padding ?
- L'espace externe
- L'espace interne
- La bordure
Que fait display: flex ?
- Cache l'élément
- Active le layout flexbox
- Change la couleur
À quoi servent les media queries ?
- À ajouter des animations
- À adapter le style selon la taille d'écran
- À changer les polices

Mini défi

Mission : Créer un design responsive complet

Améliorez votre page de présentation personnelle avec un CSS complet :

Styles à implémenter :

Reset et base
- Réinitialiser les marges/padding par défaut
- Définir une police de base
- Définir des couleurs de base
Layout
- Container principal centré avec max-width
- Header avec fond coloré
- Navigation en flexbox
- Sections avec espacement cohérent
Typographie
- Hiérarchie claire des titres
- Tailles de police responsive
- Espacement des paragraphes
Couleurs et espacements
- Palette de couleurs cohérente
- Marges et paddings harmonieux
- Bordures subtiles
Responsive
- Mobile-first approach
- Navigation adaptative
- Images responsive
- Breakpoints à 768px et 1024px

Critères :

✅ Code CSS organisé et commenté
✅ Utilisation de classes réutilisables
✅ Design cohérent et professionnel
✅ Responsive sur mobile, tablette, desktop
✅ Validation : la page est belle et fonctionnelle

Objectif : Maîtriser le CSS pour créer des designs modernes et responsives.

Validation : Vous pouvez passer au module suivant quand vous êtes capable de créer un design CSS complet et responsive.

Objectif​

Théorie​

Qu'est-ce que le CSS ?​

Syntaxe CSS​

Intégrer CSS dans HTML​

Sélecteurs​

Couleurs​

Tailles et polices​

Marges et espacements​

Positionnement​

Responsive Design​

Exercice​

Quiz​

Mini défi​