Insérer & la règle
Externe (recommandé) : <link rel="stylesheet" href="style.css">
sélecteur {
propriété: valeur;
}Interne (<style>) et en ligne (style="…", à éviter).
Sélecteurs simples
p | par balise |
.intro | par classe (réutilisable) |
#menu | par id (unique) |
Sélecteurs combinés
a b | b dans a (descendant) |
a > b | b enfant direct de a |
a + b | b juste après a |
a ~ b | tous les b après a |
⚡ Spécificité
#id > .classe > balise
En cas de conflit, le plus spécifique gagne — pas le dernier écrit.
Le modèle de boîte
De l'intérieur vers l'extérieur :
contenu → padding → border → margin
margin— espace extérieurborder— le traitpadding— espace intérieur
Toujours : * { box-sizing: border-box; }
Propriétés courantes
color | couleur du texte |
background-color | fond |
font-family / size / weight | police |
text-align | left, center, right |
Couleurs hex : #RRGGBB, 00 → FF (RVB).
div & span
div = bloc (pleine largeur, saut de ligne).
span = en ligne (dans le fil du texte).
Conteneurs neutres : servent à regrouper pour styliser.
Pseudo-classes ( : )
Un état / une position.
:hover | au survol |
:focus | champ actif |
:first-child / :last-child | 1er / dernier |
:nth-child(n) | le n-ième |
:checked | coché |
Pseudo-éléments ( :: )
Un morceau / du contenu virtuel. content obligatoire pour before/after.
::before / ::after | avant / après |
::first-letter | lettrine |
::first-line | 1re ligne |
Flexbox — conteneur
display: flex sur le parent.
flex-direction | row / column |
justify-content | axe principal (center, space-between…) |
align-items | axe transversal (center…) |
flex-wrap | wrap = passe à la ligne |
gap | espace entre items |
Flexbox — items
order | ordre d'affichage |
flex-grow | grandir (défaut 0) |
flex-shrink | rétrécir (défaut 1) |
flex-basis | taille initiale |
align-self | aligne un seul item |
Centrage parfait
.box {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}Responsive — mobile-first
/* base = mobile */
.x { width: 100%; }
@media (min-width: 768px) {
.x { width: 700px; }
}
@media (min-width: 1024px) {
.x { width: 800px; }
}Indispensable : <meta name="viewport">. Grid pour la 2D.