CSS : le contrôle de la présentation

Aussi connues sous le terme CSS (acronyme de Cascading Style Sheets), les feuilles de style (en cascade) contiennent l'ensemble des règles de présentation s'appliquant aux différents blocs d'une page web : elles donnent au navigateur les instructions nécessaires à l'affichage des différents éléments d'une page.

Les feuilles de style sont destinées au contrôle de la présentation, à la gestion de l'apparence. Elles permettent, par exemple, de définir la couleur d'un titre, de spécifier la police d'un paragraphe, de fixer l'indentation d'une liste. Elles ne doivent pas servir à structurer le document (en le divisant, par exemple, en blocs de titres, paragraphes et listes "fictifs", au moyen de balises <div> (division) auxquelles un style particulier est appliqué).

C'est le HTML qui doit transmettre la structure sémantique du document, avec les balises prévues à cet effet, qui déterminent la nature du contenu qu'elles encadrent (titre <h1> à <h6>, paragraphe <p>, liste <ul>, etc.), sans égard à l'effet sur l'affichage; la désactivation des styles permet d'ailleurs, dans une certaine mesure, de vérifier si le balisage est adéquat (titres distincts, paragraphes séparés, éléments de liste affichés correctement, etc.).

Pourquoi utiliser les feuilles de style?

L'utilisation des feuilles de style comporte de multiples avantages :

Cohésion

Les feuilles de style permettent de structurer et de contrôler l'apparence d'un ensemble de documents HTML. En spécifiant la feuille de style externe à utiliser, toutes les pages pourront bénéficier des déclarations qui s'y trouvent, assurant ainsi une cohésion de la présentation et une unité de style pour l'ensemble du site.

Allégement

L'utilisation des feuilles de style permet de réduire la taille des fichiers HTML. Les pages sont en effet allégées car toutes les spécifications concernant les éléments sont énoncées une seule fois, dans la feuille de style, et non répétées à chaque occurrence des éléments; le chargement de la page est donc plus rapide puisque le poids total s'en trouve réduit. Outre l'allégement du code HTML, les feuilles de style permettent aussi d'en réduire la complexité et de le rendre plus clair puisqu'il ne contient plus de balises de présentation.

Maintenance

La séparation du contenu et de la mise en forme entraîne une plus grande facilité de maintenance et simplifie les mises à jour puisqu'une modification sera automatiquement appliquée à toutes les pages liées à la feuille de style. Il suffit pour cela de modifier les instructions de la feuille de style concernant un élément en particulier et les changements seront répercutés automatiquement sur toutes les pages utilisant cet élément. On peut ainsi modifier l'aspect d'une page ou d'un site entier sans avoir à en changer le contenu.

Contrôle

Les feuilles de style rendent possible un contrôle plus complet de l'aspect des divers éléments d'un document HTML : polices, marges, bordures, indentations, etc. Elles permettent notamment de positionner avec précision du texte ou des images, au pixel près, ce qui est impossible avec du HTML classique.

La syntaxe des feuilles de style

Une règle de style se compose d'un sélecteur suivi d'un bloc de déclaration définissant le style, composé d’une ou de plusieurs déclarations. Le bloc de déclaration est délimité par des accolades et les différentes déclarations qui s'y trouvent sont séparées par un point-virgule. La déclaration se décompose à son tour en deux parties, soit la propriété et la valeur, séparées par le signe de ponctuation deux-points.

Dans une définition de style, la syntaxe de base est donc la suivante :

Sélecteur

Identifie l'élément HTML qui sera affecté par le style.

Propriété

Partie du sélecteur qui sera affectée.

Valeur

Façon dont la propriété sera affectée.

La syntaxe est cependant un peu différente pour un style local, alors que le style sera déclaré directement à l'intérieur d'une balise HTML existante :

<balise style="propriété:valeur;propriété2:valeur2"></balise>

Exemple :

<p style="color:#ff0000;font-size:12px"></p>

L'insertion des règles de style

Un style peut être inséré dans un document HTML à trois endroits différents : en local, en interne et en externe. Le terme « Cascade » de Cascading Style Sheets fait ici référence à l'ordre respecté dans l'interprétation des informations de style. En effet, si les trois sortes de styles sont présents, le navigateur interprétera en premier lieu les styles locaux, qui auront donc la priorité sur les autres styles (et les remplaceront), puis les styles internes et, en dernier lieu, les styles externes.

Style local (inline CSS, inline style)

Les styles sont insérés n'importe où dans la page en affectant un attribut style à une balise. À utiliser avec modération cependant, pour modifier quelques mots ou quelques lignes, une portion de texte, un paragraphe ou une cellule de tableau, puisqu'on se détourne ainsi de la véritable finalité du CSS, soit la séparation du contenu et de la mise en forme.

L'insertion d'un style local consiste donc à définir le style à même le marqueur HTML dans le document :

<html>
<head>
  <title>Titre de la page</title>
</head>
<body>
  <p style="color:#ff0000;font-weight:bold">
  Le texte du paragraphe sera rouge (#ff0000) et gras (bold).
  </p>
</body>
</html>

Style interne (embedded CSS, embedded style sheets)

Situées dans la partie <head>...</head> d'une page, les feuilles de style internes exercent leur action sur la page entière. Par rapport aux styles locaux, elles offrent la possibilité de gérer plus de code en même temps.

La déclaration d'un style interne se fait donc dans l'en-tête du document HTML, entre les balises <style>...</style> que l'on place entre les balises <head>...</head>.

Pour éviter que les navigateurs anciens, qui ne reconnaissent pas les feuilles de style, affichent les règles au lieu de les appliquer, les règles de style seront de préférence placées entre des balises de commentaire <!--  --> :

<html>
<head>
  <title>Titre de la page</title>
    <style type="text/css"> 
    <!--  
    body {
      color: #3300cc;     
      font-family: verdana, geneva, sans-serif;
      font-size: 16px
    } 
    p {
      color: #ff0000 
    }
     -->
    </style>
</head>
<body>
  <p>
  Le texte rendu du paragraphe sera rouge (#ff0000).
  </p>
Mais le texte à l'extérieur du paragraphe sera bleu (#3300cc).
</body>
</html>

Style externe (external CSS, external style sheets)

Placées en dehors des pages HTML, dans un fichier texte portant l'extension .css, les feuilles de style externes ne contiennent que le code en CSS, aucun code HTML. Elles permettent de gérer la mise en page d'une partie du site ou du site au complet. Un lien vers le fichier *.css sera inséré dans la partie <head>...</head> des pages concernées.

Une feuille de style externe est donc un simple document texte dans lequel les instructions de style se succèdent. Pour déclarer un style externe, il faut lier au document HTML une ou plusieurs feuilles de style (fichier *.css). La même feuille de style peut alors aisément s'appliquer à plusieurs documents HTML. Il suffira d'attacher le fichier *.css (à l'aide de la balise <link>) à tous les documents qui auront besoin des styles qu'il contient.

Feuille de style

body { 
  color: #000000; 
  font-size: 12px; 
  font-family: verdana, geneva, sans-serif; 
  background-color: #e8f6e9 
}

p { 
  color: #333333; 
  font-size: 14px; 
  font-weight: bold; 
  text-align: justify 
}

La feuille de style (nommée ici « design.css ») sera appelée par le ou les documents auxquels elle devra s'appliquer :

Appel de la feuille de style « design.css » dans un document HTML

<html>
<head>
 <title>Titre de la page</title>
 <link rel="stylesheet" type="text/css" href="design.css">
</head>
<body>
  <p>paragraphe</p>
</body>
</html>

Link

La balise <link> avertit le navigateur qu'il doit chercher un document situé à l'extérieur de la page HTML.

Stylesheet

L'attribut rel="stylesheet" précise que le document en question est une feuille de style externe.

Text/css

L'attribut type="text/css" spécifie le type de feuille de style.

URL

L'attribut href="URL" indique l'URL (Uniform Resource Locator) de la feuille de style, c'est-à-dire son emplacement sur le web, son adresse en quelque sorte.

N. B. : Ce document n'a pas la prétention d'être exhaustif et se limite à quelques informations de base. Il est en grande partie mais non exclusivement fondé sur la série d'articles CSS from the Ground Up publiée par Joe Gillespie sur le défunt site Web Page Design for Designers.