En règle générale, les pages d'un même site ont toutes la même présentation. Couleurs des titres, couleur de l'arrière plan, couleur du texte et des liens... l'erreur à ne pas commettre est de mettre en forme les pages indépendamment les unes des autres. Nous verrons successivement pourquoi utiliser les feuilles de style css et comment les mettre en place sur votre site.
Avantage des feuilles de style |
Utiliser les feuilles de style |
Tout d'abord, voyons comment déclarer que nous allons utiliser une feuille de style. Le but recherché est de simplifier les modifications futures. Nous allons donc placer ces données dans un fichier spécifique (ces fichiers portent l'extension .css) que l'on va importer dans chacunes des pages du site. Nous commençons par insérer la ligne ci-dessous dans l'en-tête de la page html.
<html>
<head>
<link href="http://www.domaine.com/style.css" type="text/css">
</head>
<body>
</body>
</html>
Etudions maintenant le contenu de la feuille de style. Le navigateur va importer la feuille de style spécifiée et l'appliquer à notre page HTML. Il faut donc créer un fichier (dans l'exemple, nommé style.css) en utilisant par exemple le bloc-notes de windows. Créez un nouveau fichier texte, collez-y le code ci-dessous puis enregistrez cette feuille avec le nom souhaité (style.css).
BODY { background-color:#EFEFEF; margin:0; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #000000; } H1 { font-size : 14px; font-family : Verdana, Arial, Helvetica, sans-serif; color : #000099; } H2 { font-size : 12px; font-family : Verdana, Arial, Helvetica, sans-serif; color : #990000; }
Remarque : pour la couleur, nous utilisons le code de couleur héxadécimal.
Qu'est-ce que HTML : précédent | suivant : Qu'est-ce que PHP