Qu'est-ce que le CSS ?
Le CSS (Cascading Style Sheets) est le langage qui décrit l’apparence des pages web : couleurs, polices, espacements, mise en page et animations.
À quoi ça sert ? Il sépare le contenu (HTML) du design : une même structure peut changer de style sans toucher au balisage. Indispensable pour un site lisible, responsive et agréable.
🎯
Sélecteurs & cascade
CSS
Le navigateur matche les règles puis résout la cascade (origine, importance, spécificité, ordre).
.card { }
Classe réutilisable
#hero { }
Identifiant unique (forte spécificité)
a :hover { }
Pseudo-classe interactive
.btn {
padding : 0.5 rem 1 rem ;
border-radius : 8 px ;
}
💡 Spécificité
Évite les !important sauf dernier recours ; mieux vaut simplifier les sélecteurs.
📐
Mise en page
flex : grid
Flexbox pour aligner sur un axe, Grid pour des grilles 2D expressives.
display : flex
Barres d’outils, centrage, gaps
display : grid
Zones, dashboards, galeries
@media (max-width : 768 px )
Adapter le layout au viewport
✓ Mobile
box-sizing: border-box sur * évite les surprises de largeur avec padding et bordures.
📦
Boîte & espacements
box-model
Chaque élément = contenu + padding + bordure + marge. rem et % s’adaptent au viewport.
margin : 0 auto
Centrer un bloc de largeur fixe
padding : 1 rem
Espace intérieur
border-radius : 12 px
Coins arrondis
max-width : 1200 px
Limiter la largeur du contenu
🎨
Couleurs & typographie
color : font
Palette cohérente avec variables CSS ; lisibilité via taille, graisse et interligne.
color : #2563eb
Texte (hex, rgb, hsl)
background : var(--bg)
Fond via variable custom
font-family : system-ui , sans-serif
Pile de polices
line-height : 1.5
Paragraphes aérés
:root {
--accent : #7c3aed ;
--text : #e2e8f0 ;
}
h1 { color : var(--accent) ; }
▦
CSS Grid
grid
Grid place des éléments en lignes et colonnes : idéal pour cartes, dashboards et grilles de fiches.
grid-template-columns : repeat(3, 1fr)
3 colonnes égales
gap : 1.5 rem
Espacement grille
grid-column : span 2
Élément sur 2 colonnes
✨
Transitions & états
:hover
Micro-interactions : survol, focus clavier, transitions fluides sans surcharge JavaScript.
.btn :hover { }
Style au survol
transition : transform 0.2 s
Animation douce
opacity : 0.85
Transparence
