<link rel="stylesheet" type="text/css" href="style.css"> * {font-size: 14px;color:orange;} /* selectionne tout ne sert à rien seul */ h1 { color: navy; } /* une balise*/ li a {font-size: 10px;} /* espace -> sélectionne tous les a contenu dans un li, ne sélectionne pas le li */ p > img {text-align: center;} /* La même chose, mais ne prends img que si tout de suite après p, pas d'autres balises sur le chemin */ h1, h2, h3 {background-color: red;} /* sélectionne toutes les h1 et h2 et h3*/ .message{ border: 1px solid black; background: white; } <div id="prix" class="message"> ... </div> /* affecte la class message au div*/ <div id="qte" class="message"> ... </div> /* même class sur un autre div*/ #msg2{ border: 1px solid black; } /* comme une classe mais doit être unique */ <div id="mesg2"> ... </div> /* affecte le style mesg2 au div*/ div[tarif] { color: blue; } /* tous les div qui ont un attribut tarif*/ <div id="mesg3" tarif="3.20"> ... </div> /* affecte le style mesg3 au div*/ div[code_postal="38500"] { color: red; } /* tous les div dont l'attribut code_postal vaut 38500*/ <div id="mesg3" code_postal="38500"> ... </div> /* affecte le style mesg3 au div*/ div[code_postal=^"38"] { color: pink; } /* tous les div dont l'attribut code_postal commence pas 38*/ div[code_postal=~"38"] { color: pink; } /* tous les div dont l'attribut code_postal contient 38*/ <div id="mesg3" code_postal="38 75 33 01"> ... </div> /* affecte le style mesg3 au div*/ a {} a:hover {} a:visited a:active .menu a:hover {} div:hover p:first-child /* premier sous-element*/ p i:first-child /* premier sous-truc des i qui sont dans des p */ /* si plusieurs règles s'appliquent à un même élément c'est la moins générale, la plus précise, qui l'emporte*/ p{color:red;} .message{color:green;} <p class="message"></p> /* sera green*/ /* */