CSS - Feuilles de Style

CSS : Les Bases

Découvrez le pouvoir du CSS pour transformer vos pages web. Apprenez la syntaxe, les sélecteurs, les propriétés essentielles et le box model.

  • 🎨 Style et Design
  • 🎯 Sélecteurs CSS
  • 📦 Box Model

Qu'est-ce que le CSS ?

CSS (Cascading Style Sheets) est le langage utilisé pour décrire la présentation et la mise en forme des documents HTML.

Le Rôle du CSS

❌ HTML seul :

Design basique, peu attrayant

✅ HTML + CSS :

Design professionnel et attrayant

🚀 Avantages du CSS :

🎨 Contrôle visuel

Couleurs, polices, espacements, animations

♻️ Réutilisabilité

Un style pour plusieurs pages

🔧 Maintenance

Modification centralisée du design

📱 Responsive

Adaptation aux différents écrans

Séparation des Responsabilités

HTML

CSS

JavaScript

Syntaxe CSS

Découvrez la structure de base d'une règle CSS et ses composants essentiels.

Anatomie d'une Règle CSS

Structure de base :

css 

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

Exemple concret :

css 

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

Composants expliqués :

Sélecteur

Détermine quels éléments HTML seront stylés

Exemples : h1, .classe, #id

Propriété

Définit quel aspect sera modifié

Exemples : color, font-size, margin

Valeur

Spécifie comment la propriété sera appliquée

Exemples : red, 16px, center

⚠️ Points importants :

Types de Valeurs CSS

🎨 Couleurs :

css 

color: red;

css 

color: #FF0000;

css 

color: rgb(255, 0, 0);

Noms, hexadécimal, RGB

📏 Tailles :

css 

font-size: 16px;

css 

width: 50%;

css 

margin: 1em;

Pixels, pourcentages, em

🔑 Mots-clés :

css 

text-align: center;

css 

display: block;

css 

font-weight: bold;

Valeurs prédéfinies

⚡ Fonctions :

css 

background: url('image.jpg');

css 

transform: rotate(45deg);

css 

width: calc(100% - 20px);

Fonctions CSS avancées

Commentaires CSS

Apprenez à documenter et organiser votre code CSS avec des commentaires efficaces.

💬 Syntaxe des Commentaires CSS

📝 Format de base :

css 

/* Ceci est un commentaire CSS */
h1 {
    color: blue;
}
/* Commentaire sur plusieurs lignes */
.ma-classe {
    padding: 20px; /* Commentaire inline */
}

⚠️ Important :

  • Toujours commencer par /*
  • Toujours terminer par */
  • Pas de commentaires imbriqués
  • Invisible dans le navigateur

🎯 Exemples pratiques :

css 

/* ================================ STYLES GÉNÉRAUX ================================ */
body {
    font-family: Arial, sans-serif;
    margin: 0;
}
/* --- Navigation --- */
.navbar {
    background: #333;
    padding: 1rem; /* Espacement confortable */
}
/* TODO: Ajouter styles responsives */
/* FIXME: Corriger alignement sur IE11 */
/* Styles temporaires pour les tests À supprimer avant la production */
.test-border {
    border: 2px solid red;
}

🚀 Bonnes Pratiques des Commentaires

📁 Organisation

css 

/* ==================
HEADER STYLES
================== */

  • Séparer les sections principales
  • Utiliser des délimiteurs visuels
  • Grouper les styles liés

📖 Documentation

css 

/* Hauteur fixe nécessaire
pour le sticky header */

  • Expliquer le "pourquoi"
  • Documenter les hacks CSS
  • Ajouter des exemples d'usage

🔧 Maintenance

css 

/* TODO: Optimiser pour mobile */
/* FIXME: Bug sur Safari */
/* HACK: Solution temporaire */

  • Marquer les tâches à faire
  • Signaler les bugs connus
  • Identifier les solutions temporaires

💡 Conseils d'expert :

Intégration du CSS

Découvrez les trois méthodes pour appliquer du CSS à vos pages HTML.

1. CSS Inline (dans l'attribut style)

Syntaxe :

css 

<p style="color: red; font-size: 18px;">
    Texte avec style inline
</p>
<div style="background: blue; padding: 10px;">
    Boîte avec fond bleu
</div>

Caractéristiques :

✅ Avantages :
❌ Inconvénients :

Exemple visuel :

📝 Utilisation recommandée :

2. CSS Interne (balise <style>)

Structure :

css 

<!DOCTYPE html>
<html>
<head>
    <style>
        h1 {
            color: navy;
            text-align: center;
        }
        .highlight {
            background: yellow;
            padding: 5px;
        }
    </style>
</head>
<body>
    <h1>Titre stylé</h1>
    <p class="highlight">Texte surligné</p>
</body>
</html>

Avantages et inconvénients :

✅ Avantages :
❌ Inconvénients :
🎯 Utilisation recommandée :

3. CSS Externe (fichier .css) ⭐ RECOMMANDÉ

Structure des fichiers :

css 

📁 mon-site/
    📄 index.html
    📄 styles.css
    📁 css/
        📄 main.css
        📄 responsive.css

Fichier HTML :

css 

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

Fichier CSS (styles.css) :

css 

/* Styles pour les titres */
h1 {
    color: #2c3e50;
    font-family: Arial, sans-serif;
}
/* Classe utilitaire */
.container {
    max-width: 1200px;
    margin: 0 auto;
}

Avantages majeurs :

🚀 Performance :
🔧 Maintenance :
♻️ Réutilisabilité :
⭐ Pourquoi c'est la meilleure méthode :

Le CSS externe respecte le principe de séparation des responsabilités, améliore les performances et facilite la maintenance. C'est la méthode utilisée par tous les sites professionnels.

Sélecteurs CSS

Les sélecteurs déterminent quels éléments HTML seront affectés par vos styles CSS.

Sélecteurs de Base

🏷️ Sélecteur d'élément :

css 

h1 {
    color: blue;
}
p {
    font-size: 16px;
}
div {
    margin: 10px;
}

Principe :

Cible tous les éléments d'un type donné

Exemples : tous les <h1>, tous les <p>

🎯 Sélecteur de classe :

css 

.highlight {
    background: yellow;
}
.button {
    padding: 10px 20px;
    border: none;
}

HTML correspondant :

<p class="highlight">...</p>

<button class="button">...</button>

Réutilisable sur plusieurs éléments

🆔 Sélecteur d'ID :

css 

#header {
    background: navy;
    height: 80px;
}
#footer {
    text-align: center;
}

HTML correspondant :

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

<footer id="footer">...</footer>

Unique dans la page

Sélecteurs Combinés

🔗 Combinaisons courantes :

css 

p.highlight { ... }
Paragraphes ayant la classe "highlight"

css 

.card h2 { ... }
Tous les h2 à l'intérieur d'éléments avec la classe "card"

css 

.button, .link { ... }
Éléments avec la classe "button" OU "link"

css 

#menu .nav-item { ... }
Éléments "nav-item" dans l'élément ayant l'ID "menu"

⚖️ Priorité des sélecteurs :

1. Style inline

css 

style="color: red;"

Priorité maximale (1000 points)

2. Sélecteur d'ID

css 

#header

Haute priorité (100 points)

3. Sélecteur de classe

css 

.highlight

Priorité moyenne (10 points)

4. Sélecteur d'élément

css 

p, h1, div

Priorité faible (1 point)

📋 Règles de priorité :

Listes CSS

Maîtrisez la mise en forme des listes avec les propriétés CSS dédiées : puces personnalisées, positionnement et styles avancés.

Types de Listes HTML

📍 Liste non ordonnée (<ul>) :

css 

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

🔢 Liste ordonnée (<ol>) :

css 

<ol>
    <li>Créer la structure</li>
    <li>Ajouter les styles</li>
    <li>Tester le résultat</li>
</ol>

📖 Liste de définition (<dl>) :

css 

<dl>
    <dt>HTML</dt>
    <dd>Structure des pages</dd>
    <dt>CSS</dt>
    <dd>Style et design</dd>
</dl>

Propriétés list-style

🎯 Propriétés de base :

list-style-type :

css 

list-style-type: disc; /* Puce pleine par défaut */
list-style-type: circle; /* Puce vide */
list-style-type: square; /* Carré */
list-style-type: decimal; /* Chiffres */
list-style-type: none; /* Aucune puce */

list-style-position :

css 

list-style-position: outside; /* À l'extérieur (défaut) */
list-style-position: inside; /* À l'intérieur */

list-style-image :

css 

list-style-image: url('puce.png');
list-style-image: none; /* Par défaut */

Propriété raccourcie :

css 

list-style: square inside;
list-style: url('icon.png') outside;

👁️ Types de puces :

Types de Numérotation

🔢 Chiffres :

css 

list-style-type: decimal;
list-style-type: decimal-leading-zero;

🔤 Lettres :

css 

list-style-type: lower-alpha;
list-style-type: upper-alpha;

🏛️ Romains :

css 

list-style-type: lower-roman;
list-style-type: upper-roman;

🌐 Autres :

css 

list-style-type: lower-greek;
list-style-type: armenian;

Positionnement et Personnalisation

📍 Position des puces :

list-style-position: outside (défaut)
list-style-position: inside

🎨 Puces personnalisées :

Avec pseudo-éléments :

ul.custom {

list-style: none;

ul.custom li::before {

content: "✨ ";

color: #3498db;

Avec images :

ul.icon-list {

list-style-image: url('check.png');

Listes Imbriquées et Styles Avancés

🪆 Listes imbriquées :

css 

ul {
    list-style-type: disc;
}
ul ul {
    list-style-type: circle;
}
ul ul ul {
    list-style-type: square;
}

✨ Listes stylées modernes :

css 

.modern-list {
    list-style: none;
    padding: 0;
}
.modern-list li {
    padding: 10px 15px;
    margin: 5px 0;
    background: #f8f9fa;
    border-left: 4px solid #3498db;
    border-radius: 4px;
}

Listes pour la Navigation

↔️ Menu horizontal :

css 

.nav-horizontal {
    list-style: none;
    display: flex;
    gap: 20px;
    padding: 0;
}
.nav-horizontal a {
    text-decoration: none;
    padding: 10px 15px;
    border-radius: 5px;
}

↕️ Menu vertical :

css 

.nav-vertical {
    list-style: none;
    padding: 0;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
}
.nav-vertical a {
    display: block;
    padding: 12px 20px;
    border-bottom: 1px solid #eee;
}

💡 Bonnes Pratiques pour les Listes

📋 Sémantique

  • ul pour les listes sans ordre d'importance
  • ol pour les étapes, procédures, classements
  • dl pour les définitions et glossaires
  • Toujours utiliser li comme enfant direct

♿ Accessibilité

  • Garder la structure même avec list-style: none
  • Ajouter role="list" si nécessaire
  • Contraste suffisant pour les puces personnalisées
  • Navigation keyboard-friendly

⚡ Performance

  • CSS plutôt que list-style-image pour les icônes
  • Éviter les images trop lourdes pour les puces
  • Préférer les pseudo-éléments et unicode
  • Réutiliser les classes CSS

🎯 Points clés à retenir :

Propriétés CSS Essentielles

Découvrez les propriétés CSS fondamentales pour styliser vos éléments.

Couleurs et Arrière-plans

🎨 Propriétés principales :

color (couleur du texte) :

css 

color: red; /* Nom de couleur */
color: #FF0000; /* Hexadécimal */
color: rgb(255, 0, 0); /* RGB */
color: rgba(255, 0, 0, 0.5); /* RGB + transparence */

background (arrière-plan) :

css 

background-color: lightblue;
background-image: url('image.jpg');
background-repeat: no-repeat;
background-size: cover;

Exemples visuels :

💡 Conseils :

  • Utilisez des couleurs contrastées pour la lisibilité
  • rgba() pour la transparence
  • Variables CSS pour la cohérence
  • Testez l'accessibilité des couleurs

Texte et Typographie

🔤 Police :

css 

font-family: Arial, sans-serif;
font-size: 16px;
font-weight: bold;
font-style: italic;

Famille, taille, graisse, style de la police

📐 Alignement :

css 

text-align: left;
text-align: center;
text-align: right;
text-align: justify;

Gauche, centré, droite, justifié

✨ Décorations :

css 

text-decoration: underline;
text-decoration: line-through;
text-decoration: none;
line-height: 1.5;

Soulignement, barré, aucun, hauteur de ligne

Espacement et Dimensions

📏 Dimensions :

Largeur et hauteur :

css 

width: 300px; /* Largeur fixe */
width: 50%; /* Largeur relative */
height: 200px; /* Hauteur fixe */
max-width: 100%; /* Largeur maximale */

Espacement interne (padding) :

css 

padding: 20px; /* Tous les côtés */
padding: 10px 20px; /* Vertical | Horizontal */
padding-top: 15px; /* Côté spécifique */

Espacement externe (margin) :

css 

margin: 20px; /* Tous les côtés */
margin: 0 auto; /* Centrer horizontalement */
margin-bottom: 30px; /* Côté spécifique */

Visualisation :

📐 Unités CSS courantes :

  • px : Pixels (absolue)
  • % : Pourcentage du parent
  • em : Relative à la taille de police
  • rem : Relative à la taille de police racine
  • vw/vh : Relative au viewport

Tableaux CSS

Maîtrisez la création et la mise en forme des tableaux HTML avec CSS : bordures, espacement, style et design responsive.

Structure HTML des Tableaux

📋 Balises de base :

css 

<table>
    <caption>Titre du tableau</caption>
    <thead> <!-- En-tête -->
        <tr> <!-- Ligne -->
            <th>Colonne 1</th>
            <th>Colonne 2</th>
        </tr>
    </thead>
    <tbody> <!-- Corps -->
        <tr>
            <td>Données</td>
            <td>Valeur</td>
        </tr>
    </tbody>
    <tfoot> <!-- Pied (optionnel) -->
        <tr>
            <td colspan="2">Total</td>
        </tr>
    </tfoot>
</table>

🏗️ Éléments clés :

  • <table> : Conteneur principal
  • <thead> : En-tête du tableau
  • <tbody> : Corps du tableau
  • <tfoot> : Pied du tableau
  • <th> : Cellule d'en-tête
  • <td> : Cellule de données
  • <tr> : Ligne de tableau

👁️ Rendu de base :

💡 Points importants :

Propriétés CSS des Tableaux

📏 border-collapse :

css 

border-collapse: separate;
border-collapse: collapse;

📐 border-spacing :

css 

border-spacing: 10px;
border-spacing: 5px 15px;

Fonctionne uniquement avec border-collapse: separate

📊 table-layout :

css 

table-layout: auto;
table-layout: fixed;

auto : Largeur basée sur le contenu

fixed : Largeur basée sur la première ligne

fixed = performance améliorée pour gros tableaux

Stylisation des Cellules

🎨 Propriétés essentielles :

css 

table {
    border-collapse: collapse;
    width: 100%;
    margin: 0 auto;
}
th, td {
    padding: 12px 15px;
    text-align: left;
    border: 1px solid #ddd;
}
th {
    background-color: #f8f9fa;
    font-weight: bold;
    color: #333;
}
tr:nth-child(even) {
    background-color: #f9f9f9;
}
tr:hover {
    background-color: #e8f4f8;
}

✨ Résultat stylisé :

🎯 Techniques utilisées :

  • border-collapse: collapse pour des bordures nettes
  • :nth-child(even) pour l'alternance des lignes
  • :hover pour l'interactivité
  • Padding généreux pour la lisibilité

Styles de Tableaux Modernes

✨ Style minimal :

css 

.table-minimal {
    border-collapse: collapse;
    border: none;
}
.table-minimal th {
    border-bottom: 2px solid #333;
    padding-bottom: 10px;
}
.table-minimal td {
    border-bottom: 1px solid #eee;
    padding: 10px 0;
}

🃏 Style carte :

css 

.table-card {
    border-collapse: separate;
    border-spacing: 0 10px;
}
.table-card tr {
    background: white;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    border-radius: 8px;
}
.table-card td {
    padding: 15px;
    border: none;
}

Tableaux Responsives

↔️ Scroll horizontal :

css 

.table-container {
    overflow-x: auto;
    width: 100%;
}
.table-responsive {
    min-width: 600px;
    width: 100%;
}
@media (max-width: 768px) {
    .table-container {
    border: 1px solid #ddd;
    border-radius: 8px;
    }
}

📱 Transformation mobile :

css 

@media (max-width: 768px) {
    .mobile-stack tr {
    display: block;
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    }
    .mobile-stack th,
    .mobile-stack td {
    display: block;
    width: 100%;
    text-align: left;
    }
}

📱 Stratégies responsive :

🔄 Scroll horizontal
📚 Empilement
👁️ Masquage sélectif

💡 Bonnes Pratiques pour les Tableaux

🏗️ Structure

  • Utiliser <caption> pour le titre
  • Structurer avec thead/tbody/tfoot
  • Scope pour les en-têtes complexes
  • Éviter les tableaux pour la mise en page

♿ Accessibilité

  • Headers associés aux cellules
  • Caption descriptif et concis
  • Contraste suffisant (4.5:1)
  • Navigation au clavier

⚡ Performance

  • table-layout: fixed pour gros tableaux
  • Pagination pour beaucoup de données
  • Lazy loading des lignes
  • CSS optimisé pour les répétitions

🎨 UX Design

  • Alignement cohérent (texte à gauche, nombres à droite)
  • Espacement généreux pour la lecture
  • Interactions hover/focus claires
  • Tri et filtres pour gros datasets

✅ Checklist tableaux parfaits :

Le Box Model CSS

Comprenez comment CSS calcule la taille et l'espacement de chaque élément.

Anatomie du Box Model

📦 Structure en couches :

🔍 Chaque couche expliquée :

Content (Contenu)

Zone où apparaît le texte et les images

css 

width: 200px; height: 100px;

Padding (Espacement interne)

Espace entre le contenu et la bordure

css 

padding: 20px;

Border (Bordure)

Contour visible autour du padding

css 

border: 2px solid black;

Margin (Espacement externe)

Espace entre cet élément et les autres

css 

margin: 10px;

Calcul des Dimensions

📏 Mode par défaut (content-box) :

css 

.element {
    width: 200px;
    height: 100px;
    padding: 20px;
    border: 5px solid black;
    margin: 10px;
}

📊 Calculs :

Largeur totale : 250px

200px (content) + 40px (padding) + 10px (border)

Hauteur totale : 150px

100px (content) + 40px (padding) + 10px (border)

Espace occupé : 270px × 170px

+ 20px de margin de chaque côté

📦 Mode border-box (recommandé) :

css 

.element {
    box-sizing: border-box;
    width: 200px;
    height: 100px;
    padding: 20px;
    border: 5px solid black;
    margin: 10px;
}

📊 Calculs simplifiés :

Largeur totale : 200px

width inclut padding et border

Hauteur totale : 100px

height inclut padding et border

Zone de contenu : 150px × 50px

width/height - padding - border

⭐ Pourquoi border-box est mieux :

Bordures CSS

🔲 Propriétés de bordure :

Syntaxe complète :

css 

border-width: 2px;
border-style: solid;
border-color: red;

Syntaxe raccourcie :

css 

border: 2px solid red;
border-top: 1px dashed blue;
border-radius: 10px;

Styles de bordure :

css 

solid /* Ligne pleine */
dashed /* Tirets */
dotted /* Points */
double /* Double ligne */

Exemples visuels :

💡 Astuces :

  • border-radius: 50% = cercle parfait
  • Bordures différentes par côté possible
  • border: none pour supprimer
  • Utiliser pour créer des formes simples

🎨 Propriétés CSS Avancées

Maîtrisez les propriétés letter-spacing, text-shadow et box-shadow pour des designs professionnels

📝 Letter-Spacing : Espacement des Lettres

🎯 Qu'est-ce que letter-spacing ?

La propriété letter-spacing contrôle l'espacement entre les caractères d'un texte. Elle permet de créer des effets typographiques élégants et d'améliorer la lisibilité.

📋 Syntaxe :

css 

letter-spacing: normal;
letter-spacing: 2px;
letter-spacing: 0.1em;
letter-spacing: -1px;

⚡ Valeurs courantes :

  • normal : Espacement par défaut
  • 1px à 3px : Espacement léger pour les titres
  • 0.05em à 0.2em : Espacement proportionnel
  • -0.05em : Resserrement pour les gros textes

🎨 Exemples visuels :

✨ Cas d'usage :

✨ Text-Shadow : Ombres de Texte

🎯 Qu'est-ce que text-shadow ?

La propriété text-shadow ajoute des ombres portées au texte. Elle permet de créer des effets 3D, d'améliorer la lisibilité sur des fonds complexes, et d'ajouter du style.

📋 Syntaxe :

css 

/* offset-x | offset-y | blur | color */
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
text-shadow: 1px 1px 2px #000;
text-shadow: 0 0 10px #00ff00;
/* Multiples ombres */
text-shadow: 1px 1px 2px #000, 0 0 20px #ff0000;

📐 Paramètres :

  • offset-x : Décalage horizontal
  • offset-y : Décalage vertical
  • blur : Flou de l'ombre (optionnel)
  • color : Couleur de l'ombre

🎨 Exemples visuels :

Ombre classique (2px 2px 4px rgba(0,0,0,0.7)) :

Effet 3D (1px 1px 0px #ccc, 2px 2px 0px #aaa, 3px 3px 0px #888) :

Effet lumineux (0 0 10px #00ff00, 0 0 20px #00ff00) :

Contour (-1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000) :

🎭 Effets populaires :

📦 Box-Shadow : Ombres d'Éléments

🎯 Qu'est-ce que box-shadow ?

La propriété box-shadow ajoute des ombres portées aux éléments (div, boutons, cartes). Elle est essentielle pour créer de la profondeur et de l'élégance dans les interfaces modernes.

📋 Syntaxe :

css 

/* offset-x | offset-y | blur | spread | color */
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
box-shadow: 2px 4px 12px rgba(0,0,0,0.15);
box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
/* Multiples ombres */
box-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 10px 30px rgba(0,0,0,0.1);

📐 Paramètres :

  • offset-x : Décalage horizontal
  • offset-y : Décalage vertical
  • blur : Rayon de flou
  • spread : Taille d'expansion (optionnel)
  • inset : Ombre intérieure (optionnel)
  • color : Couleur de l'ombre

🎨 Exemples visuels :

Ombre légère (0 2px 4px rgba(0,0,0,0.1)) :

Ombre médium (0 4px 12px rgba(0,0,0,0.15)) :

Ombre colorée (0 8px 25px rgba(59,130,246,0.3)) :

Ombre intérieure (inset 0 2px 4px rgba(0,0,0,0.1)) :

🎨 Styles populaires :

Propriété CSS Display

La propriété display contrôle comment un élément est affiché et détermine le type de boîte générée par l'élément dans le flux du document.

Vue d'ensemble de Display

🎯 Qu'est-ce que display ?

La propriété display définit le type d'affichage d'un élément, ce qui détermine comment il se comporte dans le flux du document et comment ses enfants sont disposés.

📋 Syntaxe de base :

css 

display: block;
display: inline;
display: inline-block;
display: flex;
display: grid;
display: none;

🔑 Valeurs principales :

  • block : Élément bloc (nouvelle ligne)
  • inline : Élément en ligne
  • inline-block : Hybride inline/block
  • flex : Conteneur flexbox
  • grid : Grille CSS
  • none : Élément masqué

👁️ Impact visuel :

💡 Principe clé :

Display détermine deux choses : comment l'élément se comporte dans le flux (bloc/inline) et comment il organise ses enfants (flex/grid).

Display Block, Inline & Inline-Block

📦 Display: Block

css 

div {
display: block;
}

  • Prend toute la largeur
  • Nouvelle ligne avant/après
  • Width/height respectées
  • Margin/padding complets

📝 Display: Inline

css 

span {
display: inline;
}

  • Largeur = contenu
  • Reste sur la même ligne
  • Width/height ignorées
  • Margin/padding horizontaux

🔲 Display: Inline-Block

css 

.box {
display: inline-block;
}

  • Largeur personnalisable
  • Reste sur la même ligne
  • Width/height respectées
  • Margin/padding complets

Display Flex & Grid

🤸 Display: Flex

css 

.flex-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

🎯 Flexbox pour :

  • Alignement et espacement
  • Layouts en 1 dimension
  • Distribution d'espace
  • Centrage facile

🗂️ Display: Grid

css 

.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 1rem;
}

🎯 Grid pour :

  • Layouts complexes en 2D
  • Grilles et tableaux
  • Positionnement précis
  • Responsive avancé

Display None et Valeurs Spéciales

👻 Display: None

css 

.hidden {
display: none;
}

  • Élément complètement masqué
  • N'occupe aucun espace
  • Retiré du flux du document
  • Différent de visibility: hidden

📊 Display: Table

css 

.table {
display: table;
}
.table-row {
display: table-row;
}
.table-cell {
display: table-cell;
}

  • Comportement de tableau HTML
  • Sans balises <table>
  • Alignement vertical facile
  • Moins utilisé aujourd'hui

📱 Variantes Inline

css 

display: inline-flex;
display: inline-grid;
display: inline-table;

  • Versions inline de flex/grid
  • Conteneur se comporte comme inline
  • Enfants suivent flex/grid
  • Utile pour les composants

🚀 Démonstration Interactive

Testez les différentes valeurs de display en temps réel :

📋 CSS généré :

display: block;

🖼️ Résultat :

Conteneur avec display: block

Élément 1
Élément 2
Élément 3

🎯 Cas d'Usage Pratiques

💼 Situations courantes :

🚫 Masquer un élément :

css 

.hidden { display: none; }

Popup fermé, menu mobile caché, contenu conditionnel

📱 Boutons alignés :

css 

.btn { display: inline-block; }

Boutons côte à côte avec tailles personnalisées

🎛️ Barre de navigation :

css 

.navbar { display: flex; justify-content: space-between; }

Logo à gauche, menu à droite

📋 Grille de produits :

css 

.products { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }

Cartes produits responsive automatique

💡 Conseils et Bonnes Pratiques :

✅ À faire :
❌ À éviter :
🧠 Aide-mémoire :

🚀 Exemples Pratiques Combinés

Découvrez comment utiliser ces trois propriétés ensemble pour créer des effets saisissants !

Titre Hero Complet :

Carte Interactive :

💻 Code CSS complet :

css 

/* Titre Hero */
.hero-title {
    letter-spacing: 3px;
    text-shadow: 2px 2px 8px rgba(0,0,0,0.7), 0 0 20px rgba(255,255,255,0.3);
}
/* Carte Interactive */
.card {
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}
.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}

🔗 Accès Direct aux Ressources

🎯 Navigation Rapide

#letter-spacing #text-shadow #box-shadow #css-effets #css-avance

Exercices Pratiques

Mettez en pratique vos connaissances CSS avec des exercices progressifs.

Exercice 1 : Carte de Profil

🎯 Objectif :

Créez une carte de profil utilisateur en appliquant les propriétés CSS de base que vous venez d'apprendre.

📋 Spécifications :

Structure requise :

  • Conteneur principal avec bordure
  • Zone avatar (cercle coloré)
  • Nom en gros titre centré
  • Poste/fonction en italique
  • Description sur plusieurs lignes
  • Bouton d'action stylé

CSS à appliquer :

  • width: 300px pour la carte
  • padding: 20px pour l'espacement
  • border-radius pour les coins arrondis
  • text-align: center pour centrer
  • Couleurs personnalisées
  • Police et tailles de texte variées

📝 Code de démarrage :

css 

<!-- HTML -->
<div class="profile-card">
    <div class="avatar">JS</div>
    <h2 class="name">Jean Dupont</h2>
    <p class="job">Développeur Web</p>
    <p class="description">
        Passionné par le développement...
    </p>
    <button class="contact-btn">
        Contacter
    </button>
</div>
<!-- CSS à compléter -->
.profile-card {
    /* Vos styles ici */
}

🎨 Résultat attendu :

Exercice 2 : Page d'Accueil Simple

🚀 Défi avancé :

Créez une page d'accueil complète en utilisant toutes les techniques CSS apprises dans ce chapitre.

🏗️ Sections à créer :

  • Header avec navigation
  • Section hero avec titre principal
  • Grille de 3 cartes de services
  • Section à propos
  • Footer avec contact

🎨 Techniques à utiliser :

  • CSS externe (fichier séparé)
  • Sélecteurs de classe et ID
  • Box model complet
  • Couleurs et typographie cohérentes
  • Bordures et espacements

💡 Structure suggérée :

css 

/* CSS recommandé */
* {
    box-sizing: border-box;
}
body {
    font-family: Arial, sans-serif;
    margin: 0;
    line-height: 1.6;
}
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}
.hero {
    background: #3498db;
    color: white;
    text-align: center;
    padding: 80px 0;
}
.services {
    /* Grid de 3 colonnes */
}

🎯 Objectifs d'apprentissage :

📊 Critères d'Évaluation

S Syntaxe (25%)

  • CSS valide
  • Sélecteurs corrects
  • Propriétés appropriées
  • Indentation propre

D Design (25%)

  • Couleurs harmonieuses
  • Typographie lisible
  • Espacements cohérents
  • Hiérarchie visuelle

S Structure (25%)

  • Organisation du CSS
  • Nommage des classes
  • Réutilisabilité
  • Séparation HTML/CSS

F Fonctionnalité (25%)

  • Rendu conforme
  • Éléments interactifs
  • Effets au survol
  • Cross-browser

🏆 Bonus (points supplémentaires) :

Maîtrisez les Bases du CSS ! 🎨

Vous avez maintenant les fondations solides pour créer des designs web magnifiques. Explorez les techniques avancées pour devenir un expert du CSS.

🚀 Prochaines étapes recommandées :

1. Pratiquez avec des projets personnels • 2. Explorez Flexbox et Grid • 3. Apprenez le responsive design • 4. Découvrez les animations CSS

Ressources pour Aller Plus Loin

Découvrez des outils et ressources essentiels pour approfondir vos connaissances CSS.

🛠️ Outils Essentiels

📚 Documentation

✨ Inspiration

💡 Conseils pour Progresser

Poursuivre avec les autres pages CSS