Les CSS : initiation et utilité pour un site Web

XP-Infos n° 8 – février 2010

Article

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.

Le code CSS

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 : Coucher de soleil

Je suis une division.

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

Les règles CSS

Une règle CSS est composée :

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.

Avantages des CSS

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 !

Possibilités offertes par CSS

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 :

Limitations des CSS

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…

Trucs et astuces

Validateur de code du W3C :

Cours de CSS en ligne :

Dernières réalisations en date

Le mois prochain

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

Partenaires

Consultant SEO88x31wout_animLe Centre d'affaires du Pays d'Aix

Contact

Votre nom est obligatoire.Ne pas dépasser 45 caractères.Caractère non accepté dans le nom.

Votre e-mail est obligatoire.E-mail non valide.Ne pas dépasser 150 caractères.

Votre message est obligatoire.Ne pas dépasser 500 caractères.URL et scripts interdits (anti-spam).