L’essentiel sur les CSS

Entrons dans le vif du sujet avec la figure 1A qui présente un document HTML de base. La figure 1B montre ce même document dans le navigateur. La structure HTML est définie par les éléments tags tels que <h1> et <h2> pour les en-têtes, <p> pour le texte de paragraphe, et <table>, <tr> et <td> pour le dessin de la table.

Soyons francs : cette page est certes basique, mais surtout mortellement ennuyeuse. Il faut donc lui ajouter du style. Commençons par apporter quelques petits changements dans HTML. Viendra ensuite la partie « cascading sheet » de CSS.

Nous voulons que les tags d’en-tête de cette page aient une police, une taille et une couleur différentes. Nous devons d’abord définir le style des tags <h1> et <h2> en appliquant le style de la définition de tag, de la façon suivante :
<h1> style="background: blue; color: yellow; font-size=150%; font-style=italic"> The History of the System i Platform</h1>
Le résultat est le titre The History of the System i Platform dans la figure 3.

Le placement des attributs de style dans le tag est un travail ennuyeux et il ne faut l’utiliser que quand on veut définir un seul tag dans le document. Mais qu’en est-il si l’on veut définir une section de style dans le document, qui s’appliquera à toute la structure du document, et pas simplement à un tag ? Pas de problème.

La figure 2 montre les tags de style que j’ai créés pour définir le style de présentation des tags <h1> et <h2>. La section style commence par le tag <style> et se termine par le tag </style>. C’est entre ces deux tags que vous allez définir les éléments d’un tag avec un style particulier. L’élément, comme h1, a sa propre sous-section entre accolades ({}). Chaque attribut de style a un nom entre parenthèses (par exemple background), utilise un signe deux-points comme séparateur, inclut une valeur attribut (par exemple blue), et se termine par un point-virgule. Sachez que vous pouvez définir de multiples éléments dans une seule sous-section.

Par exemple, si nous voulons que les deux tags d’entête <h1> et <h2> apparaissent de la même manière dans notre document, nous pouvons les définir ensemble ainsi : h1, h2 { <style attributes> } Avec cette méthode, le moment où nous définissons comment les tags d’en-tête apparaîtront dans la section style, affectera tout le document (figure 3) et nous n’aurons donc pas à modifier chaque tag d’en-tête dans le HTML.