Dans cette lecon, vous apprendrez a fabriquer votre premiere feuille de style. Vous saurez ce qu'est le modele CSS de base et quels sont les codes necessaires pour utiliser CSS dans un document HTML.

Beaucoup de proprietes des feuilles de style en cascade (CSS) sont similaires a celles de HTML. Si vous avez l'habitude d'utiliser HTML pour la presentation, vous reconnaitrez donc beaucoup de ces codes. Voyons un exemple concret.

La syntaxe CSS de base


<body bgcolor="#FF0000">


body {background-color: #FF0000;}

Comme vous l'aurez remarque, les codes sont plus ou moins identiques pour HTML et CSS. Cet exemple illustre egalement le modele fondamental de CSS :

Mais ou place-t-on le code CSS ? C'est precisement ce que nous allons voir maintenant.

Appliquer CSS a un document HTML

Il y a trois facons d'appliquer le style CSS a un document HTML. Elles sont toutes expliquees ci-dessous. Nous vous recommandons d'examiner la troisieme methode, c'est-a-dire celle externe.

Methode 1 : Dans la ligne (l'attribut style)

Une facon d'appliquer du style CSS a HTML est celle avec l'attribut HTML style. En reprenant l'exemple precedent avec l'arriere-plan rouge, on peut l'appliquer ainsi :

<html>
  <head>
    <title>Exemple</title>
  </head>
  <body style="background-color: #FF0000;">
    <p>Cette page est rouge</p>

  </body>
</html>

Methode 2 : Interne (l'element style)

Une autre methode consiste a inclure le code CSS avec la balise HTML <style>. Par exemple, comme ceci :

<html>
  <head>
    <title>Exemple</title>
    <style type="text/css">
      body {background-color: #FF0000;}

    </style>
  </head>
  <body>
    <p>Cette page est rouge</p>
  </body>

</html>

Methode 3 : Externe (un lien vers une feuille de style)

La methode recommandee est celle avec un lien vers ladite feuille de style externe. Pour le reste de ce tutoriel, nous utiliserons cette methode pour tous les exemples.

Une feuille de style externe est simplement un fichier texte ayant l'extension .css . Comme n'importe quel fichier, la feuille de style peut etre rangee sur un serveur Web ou sur un disque dur.

Par exemple, disons que votre feuille de style se nomme style.css et se trouve dans un dossier appele style . On peut illustrer cette situation comme ceci :

L'astuce consiste a creer un lien depuis le document HTML (default.htm) vers la feuille de style (style.css). Ce lien peut etre cree en une ligne de code HTML :

<link rel="stylesheet" type="text/css" href="style/style.css" />

Remarquez comment on indique le chemin de la feuille de style avec l'attribut href.

La ligne de code doit s'inscrire dans la section d'en-tete du code HTML, c'est-a-dire entre les balises <head> et </head>. Comme ceci :

<html>
  <head>
    <title>Mon document</title>

    <link rel="stylesheet" type="text/css" href="style/style.css" />
  </head>
  <body>
  ...

Ce lien instruit le navigateur d'utiliser la presentation du fichier CSS pour afficher le fichier HTML.
Ce qui est vraiment fute, c'est que plusieurs documents HTML peuvent etre relies a la meme feuille de style. En d'autres termes, on peut utiliser un seul fichier CSS pour controler la presentation de plusieurs documents HTML.

Cette technique est susceptible d'economiser beaucoup d'efforts. Par exemple, si vous voulez changer la couleur d'arriere-plan d'un site Web contenant 100 pages, une feuille de style peut vous epargner la modification manuelle des 100 documents HTML. Avec CSS, le modification peut intervenir en quelques secondes en changeant juste une seule ligne de code de la feuille de style centrale.

Essayez vous-meme

Lancez Bloc-notes (ou votre editeur de texte habituel) et creez deux fichiers, un fichier HTML et un fichier CSS, avec les contenus suivants :

default.htm

<html>
  <head>
    <title>Mon document</title>
    <link rel="stylesheet" type="text/css" href="style.css" />

  </head>
  <body>
    <h1>Ma premiere feuille de style</h1>
  </body>
</html>

style.css

body {
  background-color: #FF0000;
}

Placez maintenant les deux fichiers dans le meme dossier. Songez a sauvegarder les fichiers avec les bonnes extensions (respectivement .htm et .css )

Ouvrez default.htm dans votre navigateur et constatez le fond rouge de la page. Felicitations ! Vous avez fabrique votre premiere feuille de style !

Lecon 2 : Comment CSS fonctionne-t-il ?