Guide pratique avec exemples visuels pour maîtriser les styles et la mise en page web moderne.
Le CSS (Cascading Style Sheets) a énormément évolué. Fini les "hacks" avec des
flottants !
Aujourd'hui, avec Flexbox et Grid, la mise en page est robuste.
Les Variables CSS, les fonctions comme clamp() et les nesting natifs
apportent
une puissance proche des préprocesseurs (Sass) directement dans le navigateur.
Structure de base
sélecteur { propriété: valeur; propriété: valeur; } /* Exemple */ h1 { color: #2965f1; font-size: 2rem; margin-bottom: 16px; }
<!-- 1. Externe (recommandé) --> <link rel="stylesheet" href="style.css"> <!-- 2. Interne (dans <head>) --> <style> body { margin: 0; } </style> <!-- 3. Inline (à éviter) --> <p style="color: red;">Texte</p>
| Unité | Type | Description |
|---|---|---|
px |
Absolue | Pixels (fixe) |
% |
Relative | % du parent |
em |
Relative | × taille police parent |
rem |
Relative | × taille police racine (html) |
vw/vh |
Viewport | % largeur/hauteur écran |
fr |
Grid | Fraction d'espace disponible |
Cibler les éléments
* { } /* Universel */ element { } /* Type (p, div, h1...) */ .classe { } /* Classe */ #id { } /* ID (unique) */ [attr] { } /* Attribut */ [attr="val"] /* Attribut = valeur */
A B /* Descendant (B dans A) */ A > B /* Enfant direct */ A + B /* Frère adjacent (suivant) */ A ~ B /* Frères généraux (tous suivants) */ A, B /* Groupement */
:hover /* Survol */ :focus /* Focus */ :active /* Clic */ :visited /* Lien visité */ :checked /* Coché */ :disabled /* Désactivé */
:first-child /* Premier enfant */ :last-child /* Dernier */ :nth-child(n) /* Nième */ :nth-child(odd) /* Impairs */ :nth-child(even) /* Pairs */ :not(sel) /* Négation */
::before /* Avant le contenu */ ::after /* Après le contenu */ ::first-line /* Première ligne */ ::first-letter /* Première lettre */ ::selection /* Texte sélectionné */ ::placeholder /* Placeholder input */
| Sélecteur | Spécificité |
|---|---|
* |
0-0-0 |
element |
0-0-1 |
.classe |
0-1-0 |
#id |
1-0-0 |
style="" |
1-0-0-0 |
!important |
∞ (éviter) |
Dimensions et espacements
/* Box-sizing (recommandé) */ * { box-sizing: border-box; } /* Dimensions */ width: 100%; height: auto; max-width: 1200px; min-height: 100vh; /* Margin (extérieur) */ margin: 20px; /* 4 côtés */ margin: 10px 20px; /* vertical | horizontal */ margin: 10px 20px 30px 40px; /* haut droite bas gauche */ margin: 0 auto; /* Centrer horizontalement */ /* Padding (intérieur) */ padding: 20px; padding-left: 10px; /* Border */ border: 1px solid #ccc; border-radius: 8px; /* Coins arrondis */ border-radius: 50%; /* Cercle */
display: block; /* Prend toute la largeur */ display: inline; /* Sur la même ligne */ display: inline-block; /* Inline + dimensions */ display: none; /* Caché */ display: flex; /* Flexbox */ display: grid; /* Grid */ visibility: hidden; /* Caché mais occupe l'espace */ opacity: 0.5; /* Transparence */
position: static; /* Par défaut (flux normal) */ position: relative; /* Décalé de sa position normale */ position: absolute; /* Par rapport au parent positionné */ position: fixed; /* Par rapport au viewport */ position: sticky; /* relative puis fixed au scroll */ top: 10px; right: 0; bottom: 0; left: 0; z-index: 100; /* Ordre d'empilement */
Typographie et couleurs
font-family: serif
font-size: 1.5em
font-weight: 700 (bold)
font-style: italic
text-transform: uppercase
text-decoration: underline
letter-spacing: 3px
line-height: 2
font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 400; /* 100-900, normal=400, bold=700 */ font-style: italic; line-height: 1.6; letter-spacing: 0.5px; text-align: center; /* left | right | justify */ text-transform: uppercase; text-decoration: none; /* underline | line-through */ text-shadow: 2px 2px 4px rgba(0,0,0,0.3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; /* ... */
color: #fff; /* Hex */ color: #ffffff; /* Hex 6 digits */ color: rgb(255, 255, 255); /* RGB */ color: rgba(255,255,255,0.8); /* RGBA (alpha) */ color: hsl(0, 0%, 100%); /* HSL */ color: transparent; color: currentColor; /* Hérite */
background-color: #f0f0f0; background-image: url('img.jpg'); background-size: cover; /* contain | 100% */ background-position: center; background-repeat: no-repeat; background-attachment: fixed; /* Gradients */ background: linear-gradient(135deg, #264de4, #00d4ff); background: radial-gradient(circle, #264de4, #0a0f1a);
Mise en page flexible
.container { display: flex; flex-direction: row; /* column | row-reverse */ flex-wrap: wrap; /* nowrap | wrap-reverse */ justify-content: center; /* Axe principal */ align-items: center; /* Axe secondaire */ gap: 20px; /* Espacement */ } /* justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly */ /* align-items: flex-start | flex-end | center | stretch | baseline */
.item { flex: 1; /* Prend l'espace disponible */ flex-grow: 1; /* Capacité à grandir */ flex-shrink: 0; /* Capacité à rétrécir */ flex-basis: 200px; /* Taille de base */ align-self: flex-end; /* Alignement individuel */ order: 1; /* Ordre d'affichage */ }
display: flex; justify-content: center; align-items: center;
Grilles bidimensionnelles
.grid { display: grid; grid-template-columns: 1fr 2fr 1fr; grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); grid-template-rows: 100px auto; gap: 20px; justify-items: center; align-items: center; }
.item { grid-column: 1 / 3; /* De col 1 à 3 */ grid-column: span 2; /* Sur 2 colonnes */ grid-row: 1 / 3; /* De row 1 à 3 */ grid-area: 1 / 1 / 3 / 3; /* row-start / col-start / row-end / col-end */ }
.layout { display: grid; grid-template-areas: "header header header" "nav main aside" "footer footer footer"; } .header { grid-area: header; } .nav { grid-area: nav; } .main { grid-area: main; }
Mouvement et effets
.element { transition: all 0.3s ease; transition: property duration timing-function delay; } /* Timing functions */ transition-timing-function: ease; /* Par défaut */ transition-timing-function: linear; transition-timing-function: ease-in; /* Accélère */ transition-timing-function: ease-out; /* Décélère */ transition-timing-function: ease-in-out; transition-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55);
@keyframes slidein { from { transform: translateX(-100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } .element { animation: slidein 0.5s ease-out forwards; /* name | duration | timing | fill-mode */ animation-iteration-count: infinite; animation-direction: alternate; }
transform: translateX(50px); transform: translateY(-20px); transform: translate(50px, -20px); transform: scale(1.2); transform: rotate(45deg); transform: skew(10deg, 5deg); transform: rotate(45deg) scale(1.2); /* Combiné */ transform-origin: center center;
Media queries et adaptabilité
/* Mobile first */ .container { width: 100%; } @media (min-width: 576px) { /* Smartphone paysage */ } @media (min-width: 768px) { /* Tablette */ .container { max-width: 720px; } } @media (min-width: 992px) { /* Desktop */ .container { max-width: 960px; } } @media (min-width: 1200px) { /* Large desktop */ .container { max-width: 1140px; } }
| Device | Breakpoint |
|---|---|
| Mobile | < 576px |
| Mobile paysage | ≥ 576px |
| Tablette | ≥ 768px |
| Desktop | ≥ 992px |
| Large Desktop | ≥ 1200px |
@media (max-width: 768px) { } @media (orientation: landscape) { } @media (prefers-color-scheme: dark) { } @media (hover: hover) { } /* Device avec hover */ @media print { } /* Impression */
clamp(min, preferred, max) pour des tailles
fluides: font-size: clamp(1rem, 2vw, 1.5rem);Custom Properties
/* Déclaration (dans :root = global) */ :root { --primary: #264de4; --secondary: #2965f1; --spacing: 16px; --radius: 8px; --shadow: 0 4px 20px rgba(0,0,0,0.2); } /* Utilisation */ .button { background: var(--primary); padding: var(--spacing); border-radius: var(--radius); box-shadow: var(--shadow); } /* Valeur de fallback */ color: var(--text-color, #333); /* Redéfinition locale */ .dark-theme { --primary: #00d4ff; }
/* Calculs */ width: calc(100% - 40px); height: calc(100vh - var(--header-height)); /* Valeurs fluides */ font-size: clamp(1rem, 2vw + 0.5rem, 2rem); width: min(100%, 1200px); width: max(300px, 50%); /* Filtres */ filter: blur(5px); filter: brightness(1.2); filter: grayscale(100%); backdrop-filter: blur(10px);
Méthodologie et Organisation
/* Block */ .card { } /* Element (Enfant) */ .card__title { } .card__image { } /* Modifier (Variante) */ .card--featured { } .card__btn--large { }
:root { --bg: #ffffff; --text: #333333; } @media (prefers-color-scheme: dark) { :root { --bg: #1a1a1a; --text: #ffffff; } }
Nouvelles fonctionnalités puissantes
/* :is() et :where() pour grouper */ :is(header, footer) p { margin: 0; } /* :has() - Le sélecteur parent ! */ .card:has(img) { grid-template-columns: 1fr 1fr; } form:has(input:invalid) button { opacity: 0.5; pointer-events: none; }
/* Mieux que left/right/top/bottom */ margin-block: 10px; /* top & bottom */ margin-inline: auto; /* left & right */ padding-block-start: 20px; /* padding-top */ text-align: start; /* left (ou right en RTL) */
Le composant s'adapte à son conteneur, pas à l'écran.
.sidebar { container-type: inline-size; } @container (min-width: 400px) { .card { display: flex; } }
Propriétés essentielles
width height max-width
min-width max-height min-height
margin padding gap
border border-radius border-width
border-style border-color outline
display visibility opacity
overflow z-index
position top right bottom
left inset
flex-direction flex-wrap justify-content
align-items align-content gap
flex flex-grow flex-shrink
flex-basis align-self order
grid-template-columns grid-template-rows
grid-template-areas grid-auto-flow gap
grid-column grid-row grid-area
justify-self align-self place-self
font-family font-size font-weight
font-style font-variant line-height
text-align text-decoration text-transform
text-shadow letter-spacing word-spacing
white-space text-overflow
color background-color opacity
background-image background-size
background-position background-repeat background-attachment
linear-gradient() radial-gradient()
conic-gradient()
transform translate() rotate()
scale() skew() transform-origin
transition transition-property
transition-duration transition-timing-function
transition-delay
animation animation-name animation-duration
animation-iteration-count animation-direction @keyframes
filter blur() brightness()
contrast() grayscale() drop-shadow()
backdrop-filter
box-shadow text-shadow
cursor pointer-events user-select
@media clamp() min() max()
--custom-prop var() calc()
50+ effets CSS en action
text-shadow
gradient text
text stroke
letter-spacing
word spacing demo
overflow: auto - Scroll automatique si nécessaire.
overflow: scroll - Toujours afficher les scrollbars.
Texte normal
Texte vertical
Texte vertical