IDREZO

Technologies informatiques


6. Parenthèse sur le rôle du langage CSS

Objectifs

A la fin de ce chapitre, vous saurez comment modifier l'apparence visuelle d'une page HTML en utilisant les styles CSS. vous aurez ainsi une meilleure idée des rôles respectifs du HTML comme langage de balisage et de contenu ainsi que du CSS comme langage de style.

6.1 Ajouter quelques styles

En effet pour rendre attrayant le contenu d'une page HTML et pour pouvoir y appliquer un design particulier, il faut utiliser le langage CSS, spécialement conçu pour appliquer des styles et non le HTML.

Éditez le fichier test.html et insérez le code suivant entre les balises <body> et </body> :

<p style="border:2px solid #f00; background:#ffc;
text-align:center;">
Ceci est un paragraphe stylé.</p> <p style="border:2px solid #f00; background:#ffc;
text-align:center;">
Ceci est un autre paragraphe stylé.</p>

Enregistrez les changements, actualisez l'affichage de votre navigateur et constatez. Les paragraphes apparaissent centrés avec une bordure rouge et un arrière-plan jaune. Ce n'est pas très joli, j'en conviens, mais cela n'a aucune importance pour le moment.

Rééditez le fichier test.html, créez une liste à puces et remplacez la balise ouvrante des items de liste par le code suivant :

<li style="text-decoration:underline; color:#060;">

Enregistrez les changements et actualisez l'affichage de votre navigateur. Le texte des items de liste apparaît en vert souligné.

Ce chapitre vise à illustrer comment le langage de style CSS interagit avec le HTML et non à enseigner le langage CSS. Vous trouverez les éléments supplémentaires dans les sections appropriées du sommaire..

6.2 Grouper les styles dans l'en-tête du document

Suivant la précédente méthode, plus il y aura d'éléments stylés dans une page, plus le code deviendra lourd et difficile à lire. Pour faire plus propre, on peut séparer les choses en groupant tous les styles d'un côté et en gardant seulement le HTML de l'autre. Voici comment.

Remettez des balises <p> et <li> partout et insérez les lignes suivantes juste avant la balise fermante de l'élément head :

<style type="text/css">
  p {border:2px solid #f00; background:#ffc; text-align:center;}
  li {text-decoration:underline; color:#060;}
</style>

Sauvegardez et actualisez comme d'habitude, puis observez. Pareil. Si maintenant vous ajoutez des paragraphes ou des items de liste, ces derniers ressembleront automatiquement aux autres sans que vous ayez besoin de les styler un à un.

6.3 Mettre les styles dans un fichier externe

En groupant les styles comme on vient de le faire, on obtient déjà un degré de séparation appréciable entre HTML et CSS. Voici maintenant comment pousser cette séparation un cran plus loin.

Lancez Bloc-notes et créez un fichier que vous nommerez test.css. Mettez-y le code suivant et enregistrez le tout :

p {border:2px solid #f00; background:#ffc; text-align:center;}
li {text-decoration:underline; color:#060;}

Cela fait, remplacez les lignes de code que je vous avais fait placer dans l'élément head du fichier test.html par la ligne de code suivante :

<link rel="stylesheet" type="text/css" href="test.css" />

Enregistrez, actualisez et observez. On obtient les mêmes résultats qu'avant, mais avec une seule ligne de code dans l'en-tête du fichier HTML au lieu de quatre.

Pour que la ligne de code ci-dessus fonctionne comme prévu, les fichiers test.css et test.html doivent se trouver dans le même répertoire.

L'avantage de cette méthode sur la précédente, c'est que le même fichier de styles pourra être utilisé sur chacune des pages d'un même site. Ce qui rend possible ensuite de changer l'apparence de tout le site en ne modifiant qu'un seul fichier.

Il vous manque encore quelques notions avant de vous lancer avec profit dans l'apprentissage du langage de style CSS. Patience, ça viendra. Je vous ferai signe le moment venu.

Conclusion

Les éléments HTML viennent avec des styles prédéfinis, qu'il est possible de modifier par la suite. Du point de vue du HTML, l'important se situe au niveau de la relation logique qu'il doit y avoir entre un élément et son contenu.

Ainsi, un élément h1 par exemple, annonce logiquement un en-tête de niveau 1 et non simplement du texte écrit très gros. Inversement, l'en-tête principal d'un document appelle logiquement un balisage avec l'élément h1.

Le style par défaut de l'élément h1 ne vous plaît pas ? Ne cédez pas à la tentation d'utiliser h2 ou h3 à la place. Utilisez quand même h1 et stylez-le autrement avec CSS par la suite. Ce que vous savez devrait déjà vous convaincre que c'est la meilleure façon de procéder.