Votre première feuille de style

Premier essai

<!-- Test1.html -->
<!DOCTYPE html>
<html>
<title>Test #1</title>
<body>
<h1>Ceci est un titre de page</h1>
<p>Ceci est un paragraphe.</p>
<p>Ceci est un autre paragraphe.</p>
</body>
</html>

Commençons par écrire un court programme comme dans la premiere section et sauvegardons-le dans un fichier nommé « test1.html ». Ceci peut être fait en saisissant le texte dans l'encadré de gauche et en faisant un copier-coller dans un éditeur de texte. Pour voir quelle est la page Web que ce code va générer, il vous suffit soit de double-cliquer sur le fichier soit de cliquer sur le lien ci-dessous (auquel cas vous pourrez revenir à cette page-ci en utilisant le bouton « retour » de votre navigateur) :

test1.thml

Vous remarquerez que le formatage de la page est on ne peut plus rudimentaire.

Deuxième essai

<!-- Test2.html -->
<!DOCTYPE html>

<html lang="fr">

<meta charset="utf-8" />
<title>Test #2</title>
<style>
body
{
background-color: cornflowerblue;
background-image: url(blue_background.jpg);
}

.page
{
width: 970px;
font-family: 'Lucida Bright', 'Times New Roman', serif;
margin-left: auto;
margin-right: auto;
padding: 15px;
background-color: rgb(248,248,230);
border: double 6px rgb(12,12,12);
}
</style>

<body>
<div class="page">
<h1 style="color: #9E9670; font-family: Verdana, Arial, sans-serif;">Ceci est un titre de page</h1>
<p>Ceci est un paragraphe.</p>
<p>Ceci est un autre paragraphe.</p>
</div><!--page-->
</body>
</html>

Afin de voir comment on peut remédier à ce problème de formatage, modifions le code comme dans l'encadré de gauche et sauvegardons-le dans un fichier nommé « test2.html » (il vous faudra aussi l'image « blue_background.jpg » ; téléchargez-la en cliquant ici et sauvegardez-la dans le même sous-répertoire que test2.html).

Pour voir comment les modifications au code vont se refléter dans la page Web, il vous suffit de double-cliquer sur le fichier test2.html ou de cliquer le lien ci-dessous :

test2.thml

Il n'y a pas raison de s'inquiéter, pour le moment, des changements précis apportés au code. La principale chose à retenir à ce stade-ci est qu'on a modifié substantiellement le formatage de la page Web, et ce de deux manières différentes :

  1. On a ajouté du code de formatage en début de fichier en utilisant les balises <style></style>. Ceci affecte l'ensemble du fichier.
  2. On a ajouté du code de formatage à l'élément h1 en utilisant l'attribut style. Ceci affecte seulement cet élément particulier. Un autre élément h1 dans le même document ne serait pas affecté.

Ces deux manières de procéder ont leur utilité, mais elles ont aussi leurs limitations :

  1. Si on veut modifier le formatage de plusieurs éléments similaires dans le même fichier, l'utilisation de l'attribut style conduit à des répétitions de code fastidieuses.
  2. La même remarque s'applique si on a un site Web avec de nombreux fichiers où on veut faire des modifications de formatage semblables d'un fichier à l'autre. Le formatage fait avec les balises <style></style> devrait être répété dans chaque fichier.

Ceci ne parait pas trop problématique de prime abord, mais imaginez maintenant ce qui arriverait si on voulait après coup changer le formatage de tout un site Web au complet !

Troisième essai

<!-- Test3.html -->

<!DOCTYPE html>

<html lang="fr">

<meta charset="utf-8" />
<title>Test #3</title>
<link rel="stylesheet" href="test3.css" />

<body>
<div class="page">
<h1>Ceci est un titre de page</h1>
<p>Ceci est un paragraphe.</p>
<p>Ceci est un autre paragraphe.</p>
</div><!--page-->
</body>
</html>

/* Feuille de style test3.css */

body
{
background-color: cornflowerblue;
background-image: url(blue_background.jpg);
}

.page
{
width: 800px;
font-family: 'Lucida Bright', 'Times New Roman', serif;
background-color: rgb(248,248,230);
border: double 6px rgb(12,12,12);
border-radius: 10px;
padding: 15px;
margin: auto;
}

h1
{
color: #9E9670;
font-family: Verdana, Arial, sans-serif;
}

Une meilleure solution est donc de créer une feuille de style (fichier CSS) qu'on liera à notre code HTML. Nous appellerons ce fichier « test3.css ».

Tout d'abord, créons un fichier HTML sans formatage, « test3.html », auquel nous rattacherons le fichier test3.css en utilisant l'élément link.

Ensuite, créons le fichier test3.css (nous utiliserons un arrière-fond vert pâle pour le code des fichiers CSS) et sauvegardons-le dans le même sous-répertoire que test3.html et blue_background.jpg. On constate que si on ouvre le fichier test3.html, les résultats sont identiques à ceux obtenus avec test2.html :

test3.thml

Nous faisons l'analyse de test3.css dans la section suivante.

Accueil