3. Les feuilles de style, comment ça marche ?

Pour modifier le style d'une balise, nous allons voir les trois manières de faire. Nous allons mettre la couleur du texte en vert.

Première méthode: nous travaillons dans le contenu même de la balise. Ainsi, <p>texte</p> va devenir <p style="color: green">texte</p>. Le style de la balise se définit via l'attribut style.

Deuxième méthode: nous définissons le style de toutes les balises qui nous intéressent au début du document. Cela donne:

 1 <!doctype html public "-//W3C//DTD HTML 4.0//EN">
 2 <html>
 3 	<head>
 4 		<title>Le titre</title>
 5 		<style type="text/css">
 6 			P { color: green }
 7 		</style>
 8 	</head>
 9 	<body>
10 		<p>texte</p>
11 	</body>
12 </html>

Cette méthode a l'avantage sur la précédente de définir le style de toutes les balise <p>, alors que ce n'est pas le cas avec la première méthode.

Troisième méthode: nous mettons le style dans un fichier séparé, qui s'appelle souvent style.css, mais dont le nom, après tout, est quelconque. Le fichier HTML devient:

 1 <!doctype html public "//W3C//DTD HTML 4.0//EN">
 2 <html>
 3 	<head>
 4 		<title>Le titre</title>
 5 		<link rel="stylesheet" href="style.css" type="text/css">
 6 	</head>
 7 	<body>
 8 		<p>texte</p>
 9 	</body>
10 </html>
création est mise à disposition sous un contrat Creative Commons