INFORMATIQUE : CRÉER UN SITE WEB

FEUILLES DE STYLE

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.

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

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.
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.
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.
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... 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.

Un style peut être inséré dans un document HTML à trois endroits différents :

feuilles de style locales (inline CSS, inline style sheets)
Insérées n'importe où dans la page en affectant un attribut style à une balise, lorsque le style employé n'est utilisé que pour modifier quelques mots ou quelques lignes, une portion de texte, un paragraphe, une cellule de tableau, etc.
feuilles de style internes (embedded CSS, embedded style sheets)
Situées dans la partie <head>...</head> d'une page, elles exercent leur action sur la page entière. Elles offrent la possibilité de gérer plus de code en même temps.
feuilles de style externes (external CSS, external style sheets)
Placées en dehors des pages HTML, dans un fichier texte portant l'extension .css, elles 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.

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, puis les styles internes et les styles externes en dernier lieu.

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 :

	bloc de déclaration (composé de deux déclarations)

sélecteur	{ propriété: valeur; propriété2: valeur2 }

Exemple :

	bloc de déclaration

p	{ color: #ff0000; font-size: 12px }

Différence entre
marqueur et sélecteur

Tant qu'un élément fait partie du code HTML et est placé dans le corps du document, on parle de marqueur ou balise (exemple : <p>). Lorsque le même élément est attaché à une feuille de style interne ou externe, il se transforme en sélecteur ou identifiant. Tout marqueur HTML peut constituer un sélecteur.

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 :

Exemple :

L'insertion des règles de style

Il existe donc plusieurs façons d'associer des feuilles de style à un document HTML.

Style local

L'insertion d'un style local consiste à 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 rendu
  du paragraphe sera rouge et gras.</p>
</body>
</html>

Style interne

La déclaration d'un style interne se fait 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, arial, sans-serif;
      font-size: 16px
    } 
    p {
      color: #ff0000 
    }
     -->
    </style>
</head>
<body>
<p>Le texte rendu du paragraphe sera rouge</p>
tandis que le texte à l'extérieur du paragraphe sera bleu.
</body>
</html>

Style externe

Une feuille de style externe est un simple document texte dans lequel les instructions de style se succèdent.

Pour déclarer un style externe (fichiers *.css), il faut lier au document HTML une ou plusieurs feuilles de style. 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, arial, sans-serif; 
  background-color: #e8f6e9 
}

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

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

Appel de la feuille de style 'feuille.css' dans un document HTML :

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

La balise <link> avertit le navigateur qu'il doit chercher un document situé à l'extérieur de la page HTML.
L'attribut rel="stylesheet" précise que le document en question est une feuille de style externe.
L'attribut type="text/css" spécifie le type de feuille de style.
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.

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 site Web Page Design for Designers.