Découvrez ce qu'est le CSS, comment le relier à une page HTML et comment écrire votre toute première règle.
Ouvrir cette leçon dans KodokonLe HTML décrit le contenu d'une page web : les titres, les paragraphes, les images. Le CSS (pour Cascading Style Sheets, « feuilles de style en cascade ») décrit son apparence : les couleurs, les tailles, les espacements. Imaginez une maison : le HTML, c'est les murs et les pièces ; le CSS, c'est la peinture, les meubles et la décoration. Sans CSS, toutes les pages web se ressembleraient : du texte noir sur fond blanc.
Une règle CSS se compose de trois éléments. D'abord un sélecteur : il désigne quels éléments de la page sont concernés (par exemple tous les paragraphes). Ensuite, entre accolades { }, une ou plusieurs déclarations. Chaque déclaration associe une propriété (ce que l'on veut changer, comme la couleur) à une valeur (le choix que l'on fait, comme le rouge), séparées par deux-points : et terminées par un point-virgule ;.
p {
color: red;
font-size: 18px;
}Lisons cette règle mot à mot. p est le sélecteur : il cible tous les éléments <p> de la page, c'est-à-dire les paragraphes. color est une propriété qui règle la couleur du texte, et red (rouge en anglais) est sa valeur. font-size règle la taille du texte, ici 18px (18 pixels, l'unité de mesure des écrans). Il existe trois façons de relier ce CSS à une page HTML. La méthode recommandée est le fichier externe : le CSS vit dans son propre fichier, par exemple styles.css, que l'on branche au HTML avec une balise <link> placée dans le <head>.
<!DOCTYPE html>
<html lang="fr">
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p>Ce texte sera rouge.</p>
</body>
</html>Deuxième méthode : le CSS interne. On écrit les règles directement dans le HTML, à l'intérieur d'une balise <style> placée dans le <head>. C'est pratique pour un petit test, mais les styles ne servent qu'à cette page. Troisième méthode : le CSS inline (« en ligne »). On écrit les déclarations directement sur une balise, dans un attribut style. Notez qu'il n'y a alors ni sélecteur ni accolades, puisque le style s'applique uniquement à cette balise.
<head>
<style>
p {
color: red;
}
</style>
</head>
<body>
<p style="color: blue;">Je suis bleu.</p>
<p>Je suis rouge.</p>
</body>p { color: red; }, que représente color ?