3ème étape : la présentation du contenu avec le CSS

Pause

* { color: red; }

p { color: red; }

<p class="exeption">
.exception { color: red; }

h1, h2 { color: red; }

#style_logo { color: red; }

h3 strong { color: red; }

p .exception { color: red; }

a:hover { color: red; }

a:active { color: black; }

a:focus { color: yellow; }

a:visited { color: grey; }

code source — Code source © Benchmark Group

Pour mettre un style sur une balise XHTML, il faut créer une classe dans le fichier CSS qui portera le même nom que la balise. Au sein du fichier CSS :

* { } agit sur toutes les balises XHTML.

p { } met un style sur la balise <p>

.exception { } correspond à la balise portant l'attribut class="exception"

#style_logo { } agit sur la balise avec l'attribut id="style_logo". class et id ont le même fonctionnement, mais id est utilisable une seule fois.

h3 strong { } est une imbrication. Il met un style sur la balise strong qui se trouve à l'intérieur de la balise h3. L'imbrication peut aussi se faire en mélangeant balises et classes.

Les pseudo formats permettent d'appliquer un style à une balise selon des conditions (survol de la souris, lien visité...).

Pause