XP-Infos n° 8 – février 2010

Les CSS : initiation et utilité pour un site Web

Après avoir examiné le X/HTML le mois dernier, nous allons cette fois-ci étudier les CSS ou feuilles de styles en cascade. Comme déjà indiqué dans XP-Infos n° 6, les CSS gèrent l’apparence des éléments X/HTML et donc la mise en page du document.

Voici à quoi ressemble un code CSS :

body {
   font: 12px Verdana, Geneva, sans-serif;
   margin: 0px;
   padding: 0px;
}
h1 {
   font-family: Georgia, "Times New Roman", Times, serif;
   margin: 1em;
   color: #F0F;
}
p {
   margin: 0em 2em 1em;
}
p img {
   height: 75px;
   width: 100px;
   display: block;
   margin-top: 1em;
   border: 4px solid #F0F;
}
#division1 {
   margin: 0em 2em 1em;
   display: none;
}

Et voici le résultat de la page vue le mois dernier :

Je suis un titre de niveau 1.

Je suis un paragraphe et je contiens un lien et une image :

Je suis une division.

On voit bien que l’aspect a changé, et on a même fait disparaître la division.

Une règle CSS est composée :

• d’un sélecteur (par exemple, body), qui indique l’élément HTML sur lequel porte la règle ;
• d’une propriété (par exemple, font), qui indique quel aspect de l’élément HTML est modifié ;
• d’une valeur (par exemple, 12px Verdana, Geneva, sans-serif), qui indique quelle modification apporter à l’aspect de l’élément HTML.

Ainsi, la règle
body {
   font: 12px Verdana, Geneva, sans-serif;
   margin: 0px;
   padding: 0px;
}
modifie l’élément body (la partie visible du document) et lui attribue la police Verdana (ou, si celle-ci n’est pas présente sur l’ordinateur de l’internaute, la police Geneva, ou une police système sans-serif par défaut) tout en remettant à zéro l’espacement tout autour et à l’intérieur de l’élément.

Les feuilles de style offrent l’avantage de séparer la structure et la présentation. Cela signifie que si un client souhaite changer la couleur de tous les titres de niveau 1 dans l’ensemble de son site, il suffit de modifier la règle CSS qui porte sur ce niveau de titre (ou de la créer si elle n’existe pas encore) sans toucher au code X/HTML : la modification n’est faite que sur une ligne de code et se répercute dans l’ensemble du site.

Il est donc aisé de comprendre que les feuilles de style facilitent et accélèrent la maintenance ou l’évolution des sites qui les utilisent. Car a contrario, dans le cas d’un site où le code HTML gèrerait l’apparence, il faudrait modifier tous les titres de niveau 1 sur toutes les pages du site : on imagine facilement le travail sur un site d’un millier de pages !

Les CSS ne se contentent pas de permettre la modification de la couleur ou de la taille d’un élément, elles offrent aussi le contrôle du placement des éléments sur la page.

Ainsi, si le code X/HTML est bien conçu (bien entendu, il y a toujours des conditions !), il est à peu près possible de :

• faire passer à droite de la page une colonne qui était à gauche ;
• modifier les puces d’une liste ou son style de numérotation ;
• augmenter, diminuer ou supprimer l’espace autour d’un élément ;
• faire disparaître un élément ;
• ajouter des bordures sur un ou tous les côtés d’un élément ;
• empiler les éléments à la manière de calques ;
• etc.

En fait, les limitations des feuilles de styles ne viennent pas du langage lui-même mais des différences de mise en œuvre dans les navigateurs.

Jusqu’à récemment, certains navigateurs ne respectaient pas les normes édictées par le W3C, en particulier le plus répandu d’entre eux, ce qui constituait un sérieux frein à l’adoption généralisée de ces normes. Cela compliquait donc sérieusement le travail des créateurs de sites Internet, qui s’arrachaient les cheveux pour que leur code fonctionne dans tous les navigateurs les plus répandus.

Aujourd’hui, la situation s’arrange et les navigateurs modernes respectent pratiquement tous les normes CSS les plus utilisées. Encore faut-il que les utilisateurs mettent à jour leur navigateur favori…

Validateur de code du W3C :

• http://jigsaw.w3.org/css-validator/

Cours de CSS en ligne :

• http://www.w3.org/Style/Examples/011/firstcss.fr.html
• http://fr.html.net/tutorials/CSS/

Qualidis : interface graphique

Phister Traductions : http://www.phister.fr

Teresa Intrieri : http://www.ti-traductions.com

Le JavaScript : initiation et bonne utilisation sur votre site Internet.