Lorsque l'on rassemble tous les styles au même endroit, la notion locale est nécessairement perdue. Il devient impossible, avec la syntaxe en ligne, d'associer un style à un type de balise. Il est nécessaire d'utiliser des sélecteurs qui définissent quelles entités seront concernées par le style. Voici la syntaxe générale de l'utilisation des sélecteurs :
Dans cette illustration, les titres de niveau 1 et leurs descendants seront bleus en italique. Il existe un grand nombre de sélecteurs permettant de sélectionner les entités de la page avec différents critères.
Les déclarations CSS doivent se faire dans une balise <style>
placée dans l'en-tête
de la page.
Voici un exemple de styles internes à une page, placés dans l'en-tête :
<html>
<head>
<style>
body { background-color: #9f9f9f;}
h1 { color: indigo; }
p {margin-left: 40px;}
</style>
</head>
<body>
<h1>Titre</h1>
<p>Paragraphe.</p>
</body>
</html>
Le code précédent affiche le rendu suivant dans le navigateur :
Dans l'exemple ci-dessus, on constate l'utilisation du sélecteur body
qui
permet de définir les propriétés du corps de la page, en l'occurence la couleur
du fond de la page.
Le style déclaré dans l'en-tête sera appliqué à l'ensemble de la page. Lorsque l'on souhaite appliquer les mêmes styles à toutes les pages d'un site, il convient de créer un fichier CSS dédié.
Ajouter des styles interne afin de colorier chaque titre avec la couleur associée (le fond de la page doit être noir) :
<html>
<head>
<!-- Add styles here -->
</head>
<body>
<h1>#FFFFFF</h1>
<h2>#CCCCCC</h2>
<h3>#AAAAAA</h3>
<h4>#777777</h4>
<h5>#444444</h5>
<h6>#333333</h6>
</body>
</html>
Voici le résultat escompté :
Quel est le sélecteur CSS dans h1{color:blue;}
?
Où se placent les styles CSS internes ?
Considérons le code suivant, de quelle couleur sera le texte dans la division ?
<style>
div { color:red; }
</style>
...
<div style="color:green;">Quelle couleur ?</div>
Considérons une page HTML qui ne contient qu'un seul style CSS :
p { color: red;}