Introduction à CSS3
CSS3 (Cascading Style Sheets) est le langage utilisé pour styliser et mettre en forme les pages web. Il contrôle l'apparence, la disposition et le design de votre site.
🚀 Pourquoi apprendre CSS3 ?
- ✅ Contrôle total du design - Personnalisez l'apparence de votre site
- ✅ Responsive Design - Créez des sites adaptés à tous les écrans
- ✅ Animations et effets - Donnez vie à vos pages
- ✅ Performance optimisée - Code léger et rapide
- ✅ Indispensable - Compétence essentielle pour tout développeur web
📝 Syntaxe CSS
Une règle CSS est composée d'un sélecteur et d'un bloc de déclarations. Chaque déclaration contient une propriété et une valeur.
Structure d'une règle CSS
sélecteur {
propriété: valeur;
propriété: valeur;
}
Exemple concret
h1 {
color: blue;
font-size: 24px;
text-align: center;
}
Trois façons d'ajouter du CSS
- CSS Inline - Dans l'attribut style de la balise HTML
- CSS Interne - Dans la balise <style> du <head>
- CSS Externe - Dans un fichier .css séparé (recommandé)
🎯 Sélecteurs CSS
Les sélecteurs permettent de cibler les éléments HTML que vous souhaitez styliser. Il existe plusieurs types de sélecteurs, chacun avec sa spécificité.
Sélecteurs de base
/* Sélecteur d'élément - Cible tous les éléments du type */
p { color: red; }
/* Sélecteur de classe - Cible les éléments avec class="ma-classe" */
.ma-classe { color: blue; }
/* Sélecteur d'ID - Cible l'élément avec id="mon-id" (unique) */
#mon-id { color: green; }
/* Sélecteur universel - Cible TOUS les éléments */
* { margin: 0; }
/* Sélecteur de groupe - Cible plusieurs éléments */
h1, h2, h3 { font-family: Arial; }
Sélecteurs combinateurs
/* Descendant - Tous les p dans div */
div p { color: blue; }
/* Enfant direct - p directement dans div */
div > p { color: red; }
/* Adjacent - p immédiatement après div */
div + p { margin-top: 20px; }
/* Frères suivants - Tous les p après div */
div ~ p { color: gray; }
Pseudo-classes
/* États interactifs */
a:hover { color: red; } /* Survol */
a:active { color: green; } /* Clic */
input:focus { border: 2px solid blue; } /* Focus */
/* Sélection structurelle */
li:first-child { font-weight: bold; }
li:last-child { color: red; }
li:nth-child(2n) { background: #f0f0f0; } /* Pairs */
Pseudo-éléments
/* Ajouter du contenu avant/après */
p::before {
content: "→ ";
color: blue;
}
p::after {
content: " ✓";
}
/* Première lettre/ligne */
p::first-letter { font-size: 2em; }
p::first-line { font-weight: bold; }
💡 Spécificité : ID (100 points) > Classe (10 points) > Élément (1 point). Plus la spécificité est élevée, plus le style est prioritaire.
🌈 Couleurs CSS
CSS supporte plusieurs formats pour définir les couleurs. Chaque format a ses avantages selon le contexte.
Formats de couleurs
/* 1. Noms de couleurs (140 noms prédéfinis) */
.texte1 { color: red; }
.texte2 { color: dodgerblue; }
/* 2. Hexadécimal (#RRGGBB ou #RGB) */
.texte3 { color: #FF0000; } /* Rouge */
.texte4 { color: #F00; } /* Raccourci */
/* 3. RGB (Red, Green, Blue: 0-255) */
.texte5 { color: rgb(255, 0, 0); }
/* 4. RGBA (avec Alpha: 0-1 pour transparence) */
.texte6 { color: rgba(255, 0, 0, 0.5); } /* 50% transparent */
/* 5. HSL (Teinte, Saturation, Luminosité) */
.texte7 { color: hsl(0, 100%, 50%); } /* Rouge */
/* 6. HSLA (HSL avec transparence) */
.texte8 { color: hsla(120, 100%, 50%, 0.3); } /* Vert 30% */
Propriétés de couleur
color- Couleur du textebackground-color- Couleur de fondborder-color- Couleur de bordureoutline-color- Couleur du contouropacity- Transparence globale (0 à 1)
💡 Conseil : Utilisez HSL pour ajuster facilement la luminosité et la saturation. Utilisez RGBA/HSLA pour les superpositions transparentes.
🖼️ Arrière-plans
CSS offre de nombreuses propriétés pour personnaliser les arrière-plans.
.container {
background-color: #f0f0f0;
background-image: url('image.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
Dégradés CSS
/* Dégradé linéaire */
.gradient1 {
background: linear-gradient(to right, #1E90FF, #00CED1);
}
/* Dégradé radial */
.gradient2 {
background: radial-gradient(circle, #1E90FF, white);
}
🔲 Bordures
Les bordures permettent d'encadrer les éléments et d'ajouter des effets visuels.
Propriétés de bordure
.box {
border: 2px solid black;
border-radius: 10px;
border-top: 5px dashed red;
border-left-color: blue;
}
Ombres (Box Shadow)
.card {
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
/* Ombre multiple */
.card-hover {
box-shadow: 0 10px 20px rgba(0,0,0,0.2),
0 6px 6px rgba(0,0,0,0.1);
}
📏 Marges et Padding
Le Box Model est fondamental en CSS. Il définit comment les éléments occupent l'espace : contenu, padding, bordure et marge.
Comprendre le Box Model
- Content - Le contenu de l'élément (texte, image)
- Padding - Espace entre le contenu et la bordure (intérieur)
- Border - La bordure autour du padding
- Margin - Espace à l'extérieur de la bordure (sépare des autres éléments)
Syntaxe des marges et padding
.element {
/* 1 valeur - Tous les côtés */
margin: 20px;
/* 2 valeurs - Vertical | Horizontal */
margin: 10px 20px;
/* 3 valeurs - Top | Horizontal | Bottom */
margin: 10px 20px 15px;
/* 4 valeurs - Top | Right | Bottom | Left (sens horaire) */
margin: 10px 20px 15px 5px;
/* Propriétés individuelles */
margin-top: 10px;
margin-right: 20px;
margin-bottom: 15px;
margin-left: 5px;
}
Techniques utiles
/* Centrer horizontalement */
.center {
width: 800px;
margin: 0 auto;
}
/* Marges négatives (superposition) */
.overlap {
margin-top: -20px;
}
/* Box-sizing pour inclure padding dans la largeur */
* {
box-sizing: border-box;
}
⚠️ Margin Collapse : Les marges verticales de deux éléments adjacents fusionnent. La plus grande marge l'emporte.
✍️ Texte CSS
CSS offre de nombreuses propriétés pour contrôler l'apparence et la mise en forme du texte.
Propriétés de texte essentielles
.text {
/* Couleur du texte */
color: #333;
/* Alignement: left, right, center, justify */
text-align: center;
/* Décoration: none, underline, overline, line-through */
text-decoration: underline;
/* Transformation: uppercase, lowercase, capitalize */
text-transform: uppercase;
/* Espacement entre les lettres */
letter-spacing: 2px;
/* Espacement entre les mots */
word-spacing: 5px;
/* Hauteur de ligne (1.5 = 150% de la taille de police) */
line-height: 1.6;
/* Ombre du texte: x y flou couleur */
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}
Gestion du débordement de texte
.truncate {
white-space: nowrap; /* Pas de retour à la ligne */
overflow: hidden; /* Cache le débordement */
text-overflow: ellipsis; /* Ajoute ... */
}
.word-break {
word-wrap: break-word; /* Coupe les mots longs */
word-break: break-all;
}
🔤 Polices CSS
Contrôlez l'apparence des polices de caractères sur votre site.
Propriétés de police
.titre {
font-family: 'Arial', sans-serif;
font-size: 24px;
font-weight: bold;
font-style: italic;
}
Google Fonts
/* Dans le HTML */
<link href="https://fonts.googleapis.com/css2?family=Roboto" rel="stylesheet">
/* Dans le CSS */
body {
font-family: 'Roboto', sans-serif;
}
📦 Flexbox
Flexbox est un système de mise en page puissant pour créer des layouts flexibles et responsives.
Conteneur Flex - Propriétés
flex-direction- Direction des éléments (row, column, row-reverse, column-reverse)justify-content- Alignement sur l'axe principal (flex-start, center, space-between, space-around)align-items- Alignement sur l'axe secondaire (flex-start, center, stretch)flex-wrap- Retour à la ligne (nowrap, wrap, wrap-reverse)gap- Espacement entre les éléments
.container {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
gap: 20px;
flex-wrap: wrap;
}
Éléments Flex - Propriétés
flex-grow- Facteur d'agrandissement (0 = ne grandit pas, 1+ = grandit)flex-shrink- Facteur de rétrécissement (0 = ne rétrécit pas)flex-basis- Taille de base avant distribution de l'espaceflex- Raccourci pour grow shrink basis (ex: flex: 1 0 200px)align-self- Alignement individuel (override align-items)
.item {
flex: 1; /* Équivalent à 1 1 0 */
}
.item-fixed {
flex: 0 0 200px; /* Largeur fixe */
}
🎯 CSS Grid
CSS Grid est un système de mise en page bidimensionnel puissant pour créer des grilles complexes avec un contrôle précis sur les lignes et colonnes.
Propriétés du conteneur Grid
display: grid- Active le mode Gridgrid-template-columns- Définit les colonnes (px, %, fr, auto, repeat())grid-template-rows- Définit les lignesgap- Espacement entre cellules (row-gap, column-gap)grid-auto-flow- Direction de placement (row, column, dense)justify-items- Alignement horizontal des items (start, center, end, stretch)align-items- Alignement vertical des items
Définir une grille
.grid-container {
display: grid;
/* 3 colonnes de taille égale (fr = fraction) */
grid-template-columns: 1fr 1fr 1fr;
/* Raccourci avec repeat() */
grid-template-columns: repeat(3, 1fr);
/* Colonnes de tailles différentes */
grid-template-columns: 200px 1fr 2fr;
/* Lignes automatiques */
grid-template-rows: auto;
/* Espacement */
gap: 20px; /* ou row-gap: 20px; column-gap: 10px; */
}
Placement des éléments
grid-column- Position sur les colonnes (start / end ou span nombre)grid-row- Position sur les lignesgrid-area- Raccourci pour row-start / column-start / row-end / column-endjustify-self- Alignement horizontal individuelalign-self- Alignement vertical individuel
/* Placement avec lignes de début/fin */
.item1 {
grid-column: 1 / 3; /* De la ligne 1 à 3 (2 colonnes) */
grid-row: 1 / 2;
}
/* Placement avec span */
.item2 {
grid-column: span 2; /* Occupe 2 colonnes */
grid-row: span 2; /* Occupe 2 lignes */
}
/* Raccourci grid-area */
.item3 {
grid-area: 1 / 1 / 3 / 3; /* row-start/col-start/row-end/col-end */
}
Grille avec zones nommées
.container {
display: grid;
grid-template-areas:
"header header header"
"sidebar main main"
"footer footer footer";
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
💡 fr vs % : L'unité fr distribue l'espace disponible APRÈS avoir soustrait les tailles fixes. Plus flexible que les pourcentages !
✨ Transitions CSS
Les transitions permettent d'animer en douceur les changements de propriétés CSS lorsqu'un état change (hover, focus, etc.).
Propriétés de transition
transition-property- Propriété(s) à animer (all, background, transform, etc.)transition-duration- Durée de la transition (en s ou ms)transition-timing-function- Courbe d'accélération (ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier)transition-delay- Délai avant le début (en s ou ms)transition- Raccourci : property duration timing-function delay
Syntaxe raccourcie
.button {
background-color: #1E90FF;
transform: scale(1);
/* Transition sur toutes les propriétés */
transition: all 0.3s ease;
}
.button:hover {
background-color: #1873CC;
transform: scale(1.05);
}
Transitions multiples
.card {
/* Propriétés individuelles */
transition-property: background-color, transform, box-shadow;
transition-duration: 0.3s, 0.5s, 0.3s;
transition-timing-function: ease, ease-out, ease;
/* Ou en raccourci */
transition: background-color 0.3s ease,
transform 0.5s ease-out,
box-shadow 0.3s ease;
}
Fonctions de timing
linear- Vitesse constanteease- Lent au début et à la fin (par défaut)ease-in- Lent au début, rapide à la finease-out- Rapide au début, lent à la finease-in-out- Lent au début et à la fincubic-bezier(n,n,n,n)- Courbe personnalisée
⚡ Performance : Privilégiez les transitions sur transform et opacity pour de meilleures performances (accélération GPU).
🎬 Animations CSS
Les animations CSS permettent de créer des mouvements complexes et automatiques avec @keyframes, sans JavaScript.
Propriétés d'animation
animation-name- Nom de l'animation @keyframesanimation-duration- Durée (en s ou ms)animation-timing-function- Courbe d'accélération (ease, linear, etc.)animation-delay- Délai avant le débutanimation-iteration-count- Nombre de répétitions (nombre ou infinite)animation-direction- Direction (normal, reverse, alternate, alternate-reverse)animation-fill-mode- État avant/après (none, forwards, backwards, both)animation-play-state- État de lecture (running, paused)
Définir une animation avec @keyframes
/* Avec pourcentages */
@keyframes slideIn {
0% {
transform: translateX(-100%);
opacity: 0;
}
50% {
transform: translateX(-50%);
opacity: 0.5;
}
100% {
transform: translateX(0);
opacity: 1;
}
}
/* Avec from/to */
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
Appliquer l'animation
/* Syntaxe complète */
.box {
animation-name: slideIn;
animation-duration: 1s;
animation-timing-function: ease-out;
animation-delay: 0.5s;
animation-iteration-count: 3; /* ou infinite */
animation-direction: alternate;
animation-fill-mode: forwards; /* Garde l'état final */
}
/* Raccourci */
.box {
animation: slideIn 1s ease-out 0.5s 3 alternate forwards;
}
Animations multiples
.element {
animation: slideIn 1s ease-out,
fadeIn 0.5s ease,
rotate 2s linear infinite;
}
💡 fill-mode : forwards garde l'état final, backwards applique l'état initial pendant le delay, both combine les deux.
📱 Responsive Design
Les Media Queries permettent d'adapter votre site à différentes tailles d'écran, orientations et types d'appareils.
Syntaxe des Media Queries
@media (condition)- Applique des styles selon une conditionmin-width- Largeur minimale (Mobile First)max-width- Largeur maximale (Desktop First)orientation- Portrait ou landscapeand- Combine plusieurs conditions
Breakpoints courants
/* Mobile (0-768px) */
@media (max-width: 768px) {
.container {
flex-direction: column;
}
}
/* Tablette (769px-1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
.container {
grid-template-columns: repeat(2, 1fr);
}
}
/* Desktop (1025px+) */
@media (min-width: 1025px) {
.container {
grid-template-columns: repeat(3, 1fr);
}
}
Unités responsives
vw- 1% de la largeur du viewportvh- 1% de la hauteur du viewportvmin- 1% de la plus petite dimensionvmax- 1% de la plus grande dimension%- Pourcentage du parentem- Relatif à la taille de police du parentrem- Relatif à la taille de police racine (html)clamp(min, préféré, max)- Valeur fluide avec limites
.responsive {
/* Taille fluide avec limites */
font-size: clamp(16px, 2vw, 24px);
width: 90vw;
max-width: 1200px;
}
💡 Mobile First : Commencez par le design mobile, puis ajoutez des Media Queries avec min-width pour les écrans plus grands. Plus maintenable !
🎓 Prochaines étapes
Félicitations ! Vous avez maintenant une solide base en CSS3.
✅ Ce que vous avez appris :
- La syntaxe CSS et les sélecteurs
- Les couleurs et formats CSS
- Les arrière-plans et dégradés
- Les bordures et ombres
- Le Box Model (marges et padding)
- Le formatage du texte
- Les polices et Google Fonts
- Flexbox pour les layouts flexibles
- CSS Grid pour les grilles complexes
- Les transitions CSS
- Les animations avec @keyframes
- Le Responsive Design avec Media Queries