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 :

Mon Site Web

Bienvenue sur mon site web. Voici un paragraphe de texte normal.

Élément de liste 1
Élément de liste 2

Design basique, peu attrayant

✅ HTML + CSS :

Mon Site Web

Bienvenue sur mon site web. Voici un paragraphe de texte avec un style personnalisé.

Élément de liste 1
Élément de liste 2

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

• Structure du contenu
• Sémantique des éléments
• Hiérarchie de l'information
• Accessibilité de base

CSS

• Apparence visuelle
• Mise en page (layout)
• Couleurs et typographie
• Animations et effets

JavaScript

• Comportement interactif
• Logique de l'application
• Manipulation du DOM
• Communication serveur

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 :

sélecteur {

propriété: valeur;

}

Exemple concret :

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 :

• Chaque déclaration se termine par ;
• Les accolades {} délimitent le bloc
• Pas d'espace autour de :
• Indentation recommandée pour la lisibilité

Types de Valeurs CSS

🎨 Couleurs :

color: red;

color: #FF0000;

color: rgb(255, 0, 0);

Noms, hexadécimal, RGB

📏 Tailles :

font-size: 16px;

width: 50%;

margin: 1em;

Pixels, pourcentages, em

🔑 Mots-clés :

text-align: center;

display: block;

font-weight: bold;

Valeurs prédéfinies

⚡ Fonctions :

background: url('image.jpg');

transform: rotate(45deg);

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 :

/* 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 :

/* ================================ 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

/* ==================

HEADER STYLES

================== */

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

📖 Documentation

/* Hauteur fixe nécessaire

pour le sticky header */

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

🔧 Maintenance

/* 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 :

✅ Commentez régulièrement - Pendant que c'est frais en mémoire
✅ Soyez concis mais clair - Allez à l'essentiel
✅ Mettez à jour les commentaires - Avec le code modifié

❌ Évitez les commentaires évidents - "couleur rouge" pour color: red
❌ Ne laissez pas de code mort - Supprimez le code commenté
❌ Pas de commentaires personnels - Restez professionnel

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 :

Texte avec style inline

</p>

Boîte avec fond bleu

</div>

Caractéristiques :

✅ Avantages :

• Priorité maximale (override tout)
• Effet immédiat et visible
• Utile pour les tests rapides

❌ Inconvénients :

• Difficile à maintenir
• Pas de réutilisabilité
• Mélange contenu et présentation
• Code HTML plus lourd

Exemple visuel :

Texte avec style inline

Boîte avec fond bleu

Texte surligné

📝 Utilisation recommandée :

• Tests et prototypage rapide
• Styles très spécifiques et uniques
• Email HTML (clients email limités)
• À éviter en production

2. CSS Interne (balise <style>)

Structure :

<!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 :

• Styles centralisés dans la page
• Utilisation de sélecteurs et classes
• Meilleure organisation que inline
• Chargement avec la page

❌ Inconvénients :

• Pas de réutilisation entre pages
• Fichier HTML plus lourd
• Maintenance difficile sur gros sites
• Pas de cache CSS séparé

🎯 Utilisation recommandée :

• Page unique ou prototype
• Styles spécifiques à une page
• Tests avant externalisation
• Critical CSS inline

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

Structure des fichiers :

📁 mon-site/

📄 index.html

📄 styles.css

📁 css/

📄 main.css

📄 responsive.css

Fichier HTML :

<head>

href="styles.css">

</head>

Fichier CSS (styles.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 :

• Fichier CSS mis en cache
• HTML plus léger
• Chargement parallèle
• Compression possible

🔧 Maintenance :

• Un seul fichier pour tout le site
• Modifications centralisées
• Organisation par modules
• Versioning et collaboration

♻️ Réutilisabilité :

• Styles partagés entre pages
• Bibliothèques CSS
• Thèmes et variations
• Architecture scalable

⭐ 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 :

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 :

.highlight {

background: yellow;

}

.button {

padding: 10px 20px;

border: none;

}

HTML correspondant :

Réutilisable sur plusieurs éléments

🆔 Sélecteur d'ID :

#header {

background: navy;

height: 80px;

}

#footer {

text-align: center;

}

HTML correspondant :

Unique dans la page

Sélecteurs Combinés

🔗 Combinaisons courantes :

p.highlight { ... }

Paragraphes ayant la classe "highlight"

.card h2 { ... }

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

.button, .link { ... }

Éléments avec la classe "button" OU "link"

#menu .nav-item { ... }

Éléments "nav-item" dans l'élément ayant l'ID "menu"

⚖️ Priorité des sélecteurs :

1. Style inline

style="color: red;"

Priorité maximale (1000 points)

2. Sélecteur d'ID

#header

Haute priorité (100 points)

3. Sélecteur de classe

.highlight

Priorité moyenne (10 points)

4. Sélecteur d'élément

p, h1, div

Priorité faible (1 point)

📋 Règles de priorité :

• Plus spécifique = plus prioritaire
• En cas d'égalité : le dernier déclaré gagne
• !important force la priorité (à éviter)
• Calculer : IDs + classes + éléments

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>) :

<ul>

<li>JavaScript</li>

</ul>

HTML
CSS
JavaScript

🔢 Liste ordonnée (<ol>) :

<ol>

<li>Créer la structure</li>

<li>Ajouter les styles</li>

<li>Tester le résultat</li>

</ol>

Créer la structure
Ajouter les styles
Tester le résultat

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

<dl>

<dd>Structure des pages</dd>

<dd>Style et design</dd>

</dl>

HTML: Structure des pages
CSS: Style et design

Propriétés list-style

🎯 Propriétés de base :

list-style-type :

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 :

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

list-style-position: inside; /* À l'intérieur */

list-style-image :

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

list-style-image: none; /* Par défaut */

Propriété raccourcie :

list-style: square inside;

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

👁️ Types de puces :

list-style-type: disc

Premier élément
Deuxième élément

list-style-type: circle

Premier élément
Deuxième élément

list-style-type: square

Premier élément
Deuxième élément

list-style-type: decimal

Premier élément
Deuxième élément

list-style-type: upper-roman

Premier élément
Deuxième élément

list-style-type: none

Premier élément
Deuxième élément

Types de Numérotation

🔢 Chiffres :

list-style-type: decimal;

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

Premier
Deuxième

Premier
Deuxième

🔤 Lettres :

list-style-type: lower-alpha;

list-style-type: upper-alpha;

Premier
Deuxième

Premier
Deuxième

🏛️ Romains :

list-style-type: lower-roman;

list-style-type: upper-roman;

Premier
Deuxième

Premier
Deuxième

🌐 Autres :

list-style-type: lower-greek;

list-style-type: armenian;

Premier
Deuxième

Premier
Deuxième

Positionnement et Personnalisation

📍 Position des puces :

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

La puce est à l'extérieur du bloc de contenu de l'élément
Le texte ne s'aligne pas sous la puce en cas de retour à la ligne

list-style-position: inside

La puce fait partie du contenu de l'élément
Le texte s'aligne sous la puce en cas de retour à la ligne automatique

🎨 Puces personnalisées :

Avec pseudo-éléments :

ul.custom {

list-style: none;

}

ul.custom li::before {

content: "✨ ";

color: #3498db;

}

✨ Puce étoile personnalisée
✨ Avec couleur personnalisée

Avec images :

ul.icon-list {

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

}

✅ Tâche terminée
✅ Objectif atteint

Listes Imbriquées et Styles Avancés

🪆 Listes imbriquées :

ul {

list-style-type: disc;

}

ul ul {

list-style-type: circle;

}

ul ul ul {

list-style-type: square;

}

Frontend
- HTML
- CSS
  - Flexbox
  - Grid
- JavaScript
Backend
- PHP
- Python

✨ Listes stylées modernes :

.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;

}

Développement Frontend
Responsive Design
Optimisation Performance

Listes pour la Navigation

↔️ Menu horizontal :

.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 :

.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 :

✅ list-style-type : Change l'apparence des puces
✅ list-style-position : Contrôle le positionnement
✅ list-style-image : Utilise des images personnalisées

✅ Pseudo-éléments : Plus flexible que list-style-image
✅ Flexbox : Idéal pour les menus horizontaux
✅ Sémantique : ul/ol/dl selon le contexte

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) :

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) :

background-color: lightblue;

background-image: url('image.jpg');

background-repeat: no-repeat;

background-size: cover;

Exemples visuels :

Texte rouge avec color: #e74c3c

Texte bleu plus grand

Arrière-plan jaune avec background-color

Dégradé avec background: linear-gradient

💡 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 :

font-family: Arial, sans-serif;

font-size: 16px;

font-weight: bold;

font-style: italic;

Famille, taille, graisse, style de la police

📐 Alignement :

text-align: left;

text-align: center;

text-align: right;

text-align: justify;

Gauche, centré, droite, justifié

✨ Décorations :

text-decoration: underline;

text-decoration: line-through;

text-decoration: none;

line-height: 1.5;

Soulignement, barré, aucun, hauteur de ligne

Exemples de typographie :

Titre avec Georgia, gras, 20px

Texte centré en italique (Arial, 14px)

Code avec police monospace

Lien avec soulignement bleu

Paragraphe avec interligne double et justification. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Espacement et Dimensions

📏 Dimensions :

Largeur et hauteur :

width: 300px; /* Largeur fixe */

width: 50%; /* Largeur relative */

height: 200px; /* Hauteur fixe */

max-width: 100%; /* Largeur maximale */

Espacement interne (padding) :

padding: 20px; /* Tous les côtés */

padding: 10px 20px; /* Vertical | Horizontal */

padding-top: 15px; /* Côté spécifique */

Espacement externe (margin) :

margin: 20px; /* Tous les côtés */

margin: 0 auto; /* Centrer horizontalement */

margin-bottom: 30px; /* Côté spécifique */

Visualisation :

200px × 60px

80% de largeur

Padding 20px autour de ce contenu

Margin 30px + padding 15px

📐 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 :

<table>

<caption>Titre du tableau</caption>

<th>Colonne 1</th>

<th>Colonne 2</th>

</tr>

</thead>

<tr>

<td>Données</td>

<td>Valeur</td>

</tr>

</tbody>

<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 :

Langages de Programmation
Langage	Année	Popularité
JavaScript	1995	⭐⭐⭐⭐⭐
Python	1991	⭐⭐⭐⭐⭐
Java	1995	⭐⭐⭐⭐
3 langages listés

💡 Points importants :

• Structure sémantique pour l'accessibilité
• caption décrit le contenu du tableau
• colspan et rowspan pour fusionner
• th avec scope pour les lecteurs d'écran

Propriétés CSS des Tableaux

📏 border-collapse :

border-collapse: separate;

border-collapse: collapse;

separate (défaut) :

A	B
C	D

collapse :

A	B
C	D

📐 border-spacing :

border-spacing: 10px;

border-spacing: 5px 15px;

spacing: 8px :

A	B
C	D

Fonctionne uniquement avec border-collapse: separate

📊 table-layout :

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 :

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é :

Produit	Prix	Stock
MacBook Pro	€2,399	✅ En stock
iPad Air	€679	⚠️ Faible stock
iPhone 15	€969	❌ Rupture
AirPods Pro	€279	✅ En stock

🎯 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 :

.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;

}

Nom	Statut
Alice Martin	Actif
Bob Dupont	Inactif
Claire Simon	Attente

🃏 Style carte :

.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;

}

Projet	Progression
Site E-commerce Client: TechCorp	75%
App Mobile Client: StartupXYZ	45%

Tableaux Responsives

↔️ Scroll horizontal :

.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;

}

Nom du produit	Description	Prix unitaire	Quantité	Total
MacBook Pro 16"	Ordinateur portable haute performance	€2,399.00	2	€4,798.00

📱 Transformation mobile :

@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;

}

Nom:

Alice Martin

Email:

alice@example.com

Statut:

Actif

Nom:

Bob Dupont

Email:

bob@example.com

Statut:

Inactif

📱 Stratégies responsive :

🔄 Scroll horizontal

• Conteneur avec overflow-x
• Largeur minimale du tableau
• Indicateur de scroll

📚 Empilement

• display: block sur mobile
• Cartes individuelles
• Labels pour chaque données

👁️ Masquage sélectif

• Colonnes secondaires cachées
• Informations essentielles seulement
• Détails en modal/expand

💡 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 :

✅ border-collapse: collapse pour des bordures nettes
✅ Padding suffisant dans th et td (min 10px)
✅ Alternance des lignes avec nth-child
✅ Headers visuellement distincts des données

✅ Strategy responsive définie (scroll/stack/hide)
✅ États hover/focus pour l'interactivité
✅ Alignement logique selon le type de données
✅ Performance optimisée pour grands datasets

Le Box Model CSS

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

Anatomie du Box Model

📦 Structure en couches :

CONTENT

width × height

Content

Padding

Border

Margin

🔍 Chaque couche expliquée :

Content (Contenu)

Zone où apparaît le texte et les images

width: 200px; height: 100px;

Padding (Espacement interne)

Espace entre le contenu et la bordure

padding: 20px;

Border (Bordure)

Contour visible autour du padding

border: 2px solid black;

Margin (Espacement externe)

Espace entre cet élément et les autres

margin: 10px;

Calcul des Dimensions

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

.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é) :

.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 :

• Dimensions prévisibles
• Calculs plus simples
• Responsive plus facile
• Standard moderne

Bordures CSS

🔲 Propriétés de bordure :

Syntaxe complète :

border-width: 2px;

border-style: solid;

border-color: red;

Syntaxe raccourcie :

border: 2px solid red;

border-top: 1px dashed blue;

border-radius: 10px;

Styles de bordure :

solid /* Ligne pleine */

dashed /* Tirets */

dotted /* Points */

double /* Double ligne */

Exemples visuels :

border: 2px solid blue

border: 3px dashed red

border: 4px dotted green + border-radius

Bordures différentes par côté

Cercle

💡 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 ✨ Text-Shadow 📦 Box-Shadow

📝 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 :

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 :

Normal (défaut) :

AVENGERS ASSEMBLE

letter-spacing: 2px :

AVENGERS ASSEMBLE

letter-spacing: 5px :

HERO POWER

letter-spacing: -1px :

Texte condensé

✨ Cas d'usage :

• Titres élégants : 1-3px pour plus d'impact
• Logos : Espacement personnalisé
• Boutons : Légère augmentation pour la lisibilité
• Navigation : Espacement uniforme

✨ 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 :

/* 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)) :

SUPER HÉROS

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

3D EFFECT

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

NÉON GLOW

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

CONTOUR

🎭 Effets populaires :

• Lisibilité : Ombre légère sur fond d'image
• Effet 3D : Multiples ombres dégradées
• Néon/Glow : Ombres colorées sans décalage
• Contour : 4 ombres pour entourer le texte

📦 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 :

/* 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)) :

Carte simple

Ombre subtile pour les cartes

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

Carte elevée

Plus de profondeur visuelle

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

Carte avec accent

Ombre bleue pour l'accent

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

Effet enfoncé

Ombre vers l'intérieur

🎨 Styles populaires :

• Material Design : 0 2px 10px rgba(0,0,0,0.1)
• Neumorphism : Multiples ombres claires/foncées
• Hover Effects : Ombre plus prononcée au survol
• Focus States : Ombres colorées pour l'accessibilité

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 :

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 :

Éléments par défaut :

Block : <div>, <p>, <h1>, <section>

Inline : <span>, <a>, <strong>, <em>

Inline-block : <img>, <input>, <button>

💡 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

div {

display: block;

}

Bloc 1

Bloc 2

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

📝 Display: Inline

span {

display: inline;

}

Inline 1 Inline 2 Inline 3

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

🔲 Display: Inline-Block

.box {

display: inline-block;

}

IB 1

IB 2

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

Display Flex & Grid

🤸 Display: Flex

.flex-container {

display: flex;

justify-content: space-between;

align-items: center;

gap: 1rem;

}

Résultat Flexbox :

ITEM 1

ITEM 2

ITEM 3

🎯 Flexbox pour :

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

🗂️ Display: Grid

.grid-container {

display: grid;

grid-template-columns: 1fr 1fr;

grid-template-rows: auto auto;

gap: 1rem;

}

Résultat Grid 2×2 :

ITEM 1

ITEM 2

ITEM 3

ITEM 4

🎯 Grid pour :

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

Display None et Valeurs Spéciales

👻 Display: None

.hidden {

display: none;

}

Visible

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

📊 Display: Table

.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

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 :

🎮 Contrôles :

Valeur de display :

📋 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 :

.hidden { display: none; }

Popup fermé, menu mobile caché, contenu conditionnel

📱 Boutons alignés :

.btn { display: inline-block; }

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

🎛️ Barre de navigation :

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

Logo à gauche, menu à droite

📋 Grille de produits :

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

Cartes produits responsive automatique

💡 Conseils et Bonnes Pratiques :

✅ À faire :

• Utiliser flex pour les layouts 1D
• Utiliser grid pour les layouts 2D complexes
• Préférer display: none pour masquer
• Tester sur différents navigateurs

❌ À éviter :

• Float pour les layouts modernes
• Position absolute sans raison
• Table-cell pour l'alignement simple
• Inline-block avec beaucoup d'éléments

🧠 Aide-mémoire :

Block : pile d'éléments
Inline : mots dans une phrase
Flex : rangée ou colonne flexible
Grid : tableau avec lignes et colonnes

🚀 Exemples Pratiques Combinés

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

Titre Hero Complet :

AVENGERS

Assemble for the ultimate battle!

Carte Interactive :

IRON MAN

Genius, Billionaire, Playboy, Philanthropist

💻 Code CSS complet :

/* 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

📝

Letter-Spacing

Cours typographie CSS avec letter-spacing

✨

Text-Shadow

Effets visuels et ombres de texte

📦

Box-Shadow

Ombres et profondeur des éléments

🎯 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 :

<h2 class="name">Jean Dupont</h2>

<p class="job">Développeur Web</p>

Passionné par le développement...

</p>

Contacter

</button>

</div>

.profile-card {

/* Vos styles ici */

}

🎨 Résultat attendu :

Jean Dupont

Développeur Web

Passionné par le développement frontend et backend, spécialisé en JavaScript et CSS moderne.

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 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 :

• Organiser le CSS de manière logique
• Utiliser des noms de classes sémantiques
• Maîtriser le box model
• Créer une hiérarchie visuelle claire
• Appliquer une palette de couleurs cohérente

📊 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) :

• Variables CSS personnalisées
• Animations CSS simples
• Dégradés créatifs
• Pseudo-éléments (:hover, :focus)

• Code CSS commenté
• Optimisation des performances
• Accessibilité (contrastes, focus)
• Innovation et créativité

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.

📐 Flexbox 🎯 CSS Grid 📱 Responsive ✨ Animations 🔧 Variables ⚡ SASS/SCSS

🚀 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

DevTools du navigateur - Inspection et débogage
VS Code - Éditeur avec extensions CSS
Live Server - Rechargement automatique
CSS Validator - Validation du code
Autoprefixer - Compatibilité navigateurs

📚 Documentation

MDN Web Docs - Référence complète CSS
Can I Use - Compatibilité navigateurs
W3Schools - Tutoriels et exemples
CSS-Tricks - Articles et techniques
Flexbox Froggy - Apprentissage ludique

✨ Inspiration

CodePen - Exemples et expérimentations
Dribbble - Designs web inspirants
Awwwards - Sites web primés
CSS Design Awards - Créations exceptionnelles
GitHub - Projets open source CSS

💡 Conseils pour Progresser

• Pratiquez quotidiennement - Même 15 minutes par jour
• Reproduisez des designs - Analysez et recréez
• Expérimentez librement - Testez de nouvelles propriétés

• Rejoignez des communautés - Discord, Reddit, forums
• Participez à des défis - Daily CSS Challenge
• Créez des projets personnels - Portfolio, sites vitrine