Et si je vous disais qu’aujourd’hui même, le code source de votre site pourrait être réduit des deux tiers, ce qui vous ferait économiser autant de bande passante chaque mois?
Votre site serait plus accessible aux utilisateurs non voyants et aux autres plateformes de navigation comme les assistants numériques personnels (PDA), mieux indexé par les moteurs de recherche, et se chargerait beaucoup plus rapidement, ce qui rendrait vos clients plus heureux.
Les changements de design à l’échelle du site prendraient quelques minutes plutôt que des jours.
Tout cela est possible en concevant avec les standards et les CSS.
Partie III : tout découle d’ici
Je dois m’excuser pour les longues leçons d’introduction qui ont précédé celle-ci. Cela dit, je ne suis pas allé aussi loin que j’aurais pu dans la théorie des CSS. Pour cela, il y a l’excellent livre de Jeffrey Zeldman, Designing With Web Standards.
À partir de maintenant, cette rubrique proposera de petites bouchées de CSS de base pour ceux qui veulent passer aux standards.
Connaissez votre body
Les feuilles de style en cascade (CSS) reposent sur des règles générales au niveau racine, qui deviennent plus précises au besoin. Puisque l’élément <body> englobe tout ce que l’utilisateur voit en naviguant sur un site, c’est le niveau racine vers lequel on se tourne d’abord pour établir un style.
L’idée de base : si vous pouvez établir quelque chose une seule fois dans le <body>, vous n’avez jamais à le refaire. Cela comprend background-color, font-family, margin, etc.
Et les exceptions?
Les CSS, c’est une affaire d’exceptions. Une règle définie dans le <body> peut être remplacée par toute règle plus précise.
Par exemple, si la couleur d’arrière-plan (background-color) de l’élément <body> est grise et que celle des balises <p> est rouge, <p> l’emportera sur <body>.
Si la couleur d’arrière-plan des balises <p> n’est pas définie, elles hériteront du style de leur parent, ici <body>, donc gris.
Maintenant, on a du style
Si vous souhaitez suivre cette leçon, la feuille de style et le document XHTML sont fournis à titre de référence. Une excellente façon d’expérimenter par vous-même serait d’utiliser le navigateur Firefox avec l’extension gratuite Web Developer.
Sinon, vous pouvez utiliser un éditeur de texte comme BBEdit, PageSpinner, TextEdit ou le Bloc-notes, et votre navigateur préféré. Il paraît que HTML-Kit est bon sous Windows.
Jetez un coup d’œil à la feuille de style et au XHTML. Le code derrière la page Web obtenue est simple, mais regardez la page sans aucun style appliqué. Dans Firefox : Affichage > Style de la page > Aucun style. Très différent, n’est-ce pas? Un code simple, des résultats sophistiqués.
Comment ça fonctionne?
Voici le code en un coup d’œil :
body {
margin: 20px;
border: 20px solid #fff;
padding: 20px;
background: #ccc url(../i/bg.jpg) repeat-x left bottom;
font-family: geneva, verdana, arial, helvetica, sans-serif;
color: #333;
}
Un peu de syntaxe de base :
- body est l’élément de la page qui est décrit
- { } – ce sont des délimiteurs qui contiennent le code pertinent
- Les mots à gauche des deux-points (:) sont des propriétés que les navigateurs compatibles CSS comprennent
- Chacune de ces propriétés doit se terminer par un point-virgule (;)
- Les caractères à droite des deux-points (:) sont les paramètres que vous définissez
Quelques propriétés de base
- margin : l’espace à l’extérieur de l’élément par rapport aux autres éléments; ici, les limites du navigateur
- border : oui, c’est l’épaisse bordure blanche qui entoure le texte
- padding : l’espace entre la bordure d’un élément et son contenu
- background : tout ce qui concerne l’arrière-plan, ici celui de la page entière
- font-family : définit la police par défaut de toute la page
- color : définit la couleur du texte pour toute la page
En petites bouchées
D’accord, j’étais peut-être un peu optimiste. Nous avons tout de même couvert beaucoup de notions essentielles.
C’est tout pour l’instant. Des explications détaillées sur les paramètres abordés se trouvent dans la feuille de style elle-même. En attendant, continuez d’utiliser l’extension Web Developer avec la page de la leçon. Essayez d’autres valeurs ou supprimez carrément des lignes. Voyez ce que vous obtenez.
Comme toujours, n’hésitez pas à laisser vos commentaires ou questions, et je ne manquerai pas d’y répondre.