Les feuilles de style (3/8)

Redéfinir la présentation des balises HTML

Vous l'avez vu, la présentation par défaut des balises HTML est simple et sans fioriture, d'aucuns diraient austères. Nous allons maintenant apprendre à redéfinir la présentation de certaines balises. Les informations de style que nous allons donner sont des instructions pour le navigateur : afficher telle balise comme ceci, avec telle couleur, telle police, etc.

 

L'héritage de la reine <body>

Pour définir la présentation par défaut de votre page, il est utilise de commencer par donner des informations sur la balise <body>. Vous vous en souvenez, c'est cette balise qui contient tout le code HTML à afficher. Commençons par indiquer quelle est la police à utiliser par défaut sur vos pages. Dans votre fichier CSS encore vierge, indiquez :

body {
	font-family: verdana, arial, sans-serif;
	font-size: 12px;
}

Vous le voyez, une fois votre feuille CSS sauvegardée, la présentation de votre fichier HTML change immédiatement. La ligne que nous avons rajoutée peut se lire ainsi : pour tout ce qui est dans la balise <body>, utilisez la police verdana, ou si elle n'existe pas la police arial, ou si cette dernière n'existe pas, la police sans-serif du navigateur. Pensez à finir toutes vos listes de police par une police générique (serif, sans-serif, cursive, fantasy, monospace). Pensez également à finir vos lignes par un point-virgule.

Quand vous préciser un élément de style pour une balise, toutes les balises contenues dans celles-ci héritent de ce style. Ainsi, toutes les balises contenues dans la balise <body> héritent de la police que vous avez choisie. Voici comment rend désormais notre page d'exemple.

 

Les enfants décident

Les balises-"enfants" héritent donc du style des balises parentes. Si vous voulez que votre balise-enfant s'affiche différemment, il suffit de le dire ! Par exemple, dans votre fichier CSS :

h2 {
	font-family: arial, serif;
}

Ainsi vos titres, insérés dans les balises <h2> utiliseront plutôt une police avec serif, comme le times new roman. Tant qu'on y est, ajoutons dans le h2 du CSS quelques lignes pour améliorer la présentation des titres.

h2 {
	font-family: arial, serif;
	color:maroon;
	margin: 30px 0px 0px 20px;
}

Nous avons défini grâce à l'attribut color la couleur du texte : bordeaux (maroon). Ensuite, nous avons défini les marges grâce à margin. Cela se lit en tournant dans le sens horaire : marge de 30 pixels en haut, marge de 0pixel à droite, marge de 0 pixel en bas, marge de 20 pixel à gauche. Ainsi le texte de votre titre <h2> sera légèrement décalé vers la droite, comme s'il était indenté. Remarquez bien comme les informations de style s'appliquent d'un seul coup à tous vos titres <h2>. C'est là que réside la rapidité du CSS.

Dans la foulée, ajoutons aussi une mise en forme pour <h1> (le titre de la page) et <h3> pour harmoniser les couleurs.

h1 {
	color:white;
	background-color:maroon;
	text-align:center;
}
h3 {
	font-family:arial, serif;
	color:maroon;
	margin: 10px 0px 0px 30px;
}

Pour le titre <h1>, nous avons utilisé un police blanche, que nous avons mise sur un fond bordeaux, et nous avons centré le texte. Voici notre feuille de style pour l'instant (ouvrez-la avec votre navigateur ou votre éditeur). Voici ce qu'est devenue notre page d'exemple.

 

Regardons maintenant les propriétés CSS les plus courantes.

 

Revenir au sommaire de cette leçon
Revenir à l'index des leçons Web

Dernière mise à jour le 01-01-1970.

Page conforme aux specifications XHTML 1.1 Contrat Creative Commons
L'intégralité du site, y compris les photos, fait l'objet d'un contrat Creative Commons.
A note to those who do not read French