A quoi servent les feuilles de style (CSS) ?

CSS, un langage de mise en page

CSS décrit la présentation des documents indépendamment du contenu. La couleur du texte d'un paragraphe et sa police, les marges, sont des « attributs de style ».

• En HTML « classique », il faut décrire (et répéter) les attributs de présentation (au niveau de chaque paragraphe <p>, par exemple), avec une incidence importante sur la taille finale de la page.
• En CSS, une feuille de styles décrit des « sélecteurs » qui sont les différentes formes de styles nécessaires à un document; le codage HTML est allégé car il ne contient aucune indication de style.

Le W3C a défini plusieurs versions de CSS (1, 2, 2.1 et 3), avec une complexité fonctionnelle - à mon sens - exagérée : certaines spécifications ne sont pas encore disponibles sur tous les navigateurs, probablement parce qu'elles étaient définies de manière compliquée. Plus gênant notamment, Internet Explorer n'interprète pas les dimensions des objets de la même manière que les autres navigateurs…

Qu'est ce qu'un style ?

Les styles sont des instructions pour afficher les éléments constituant une page HTML : rendu du texte (police, taille, interligne, italiques ou gras, couleurs, etc.), décorations (images de fond, bordures…), marges et espacement, positionnement des boîtes de texte dans la page.

Où met-on les instructions de style ?

Ces instructions sont regroupées dans des «feuilles de style» :

• Il peut s'agir de fichiers séparés. On parle alors de feuilles de style externes ; les pages s'y réfèrent au moyen d'une balise <link contenant l'adresse de la feuille. Le grand avantage d'une feuille de style externe est que toutes les pages qui lui sont reliées ont le même rendu. Il suffit de modifier la feuille externe pour modifier toutes les pages du site.
• Mais on peut aussi être amené à utiliser des styles spécifiques à une page donnée. Dans ce cas, les instructions de style resteront dans la page elle-même, c.à.d. dans le même fichier (feuille de style locale), voire au niveau de l'objet HTML par une instruction style="<instructions css>".

La cascade des feuilles de style

Il y a plusieurs sources possibles pour les instructions de style : les feuilles externes (on peut en avoir plusieurs), les feuilles internes et les feuilles locales. Le principe est simple : ces feuilles arrivent logiquement les unes après les autres (c'est le sens de l'acronyme anglais CSS : cascading style sheets, feuilles de style en cascade), et c'est la dernière lue qui compte en cas de conflit.

Le navigateur prend en compte successivement :

1. les feuilles externes (s'il y en a plusieurs, dans l'ordre où elles apparaissent dans la page) ;
2. les instructions internes ;
3. les instructions locales

La notion d'héritage

Une page HTML est formée d'une succession de blocs imbriqués les uns dans les autres. Par exemple, le corps de page dans son ensemble, un sous-titre et un paragraphe forment trois blocs différents.

Le style de chaque bloc contient un grand nombre d'informations (police, taille, couleur, interligne, etc.) mais on ne va pas tout redéfinir à chaque fois : le style d'un bloc hérite du style du bloc « parent », et l'on ne précise que ce qui doit changer. Par exemple, la taille de police du paragraphe s'exprimera en pourcentage de celle du corps de document.

Intérêt des feuilles de style CSS

• Le codage HTML est simplifié : les styles sont réduits aux indications de classe (ou ID) des sélecteurs de la feuille CSS. En HTML5, les instructions de style explicites (par exemple : width="120") sont interdites et doivent être spécifiées en CSS.
• Séparer la présentation et le contenu simplifie la maintenance des sites : la présentation est plus homogène, car elle est partagée par un ensemble de pages. Il suffit de modifier une feuille externe pour changer toute la charte graphique d'un site.
• Les éditeurs de logiciels (navigateurs) ne font plus évoluer la gestion des styles qu'au travers de CSS, plutôt qu'au niveau du support des instructions de styles classiques HTML : la mise en page définie en CSS est donc plus cohérente - d'un navigateur à l'autre - et est la seule à offrir de nouvelles possibilités.

Responsive web design : design adaptatif

La variété des medias utilisés pour consulter internet (tablettes, ordinateurs et smartphones) conduit à totalement repenser la conception des pages et des feuilles css. La tendance était autrefois de faire 2 versions des pages, l'une pour l'ordinateur et l'autre pour une tablette et smartphone ; maintenant, il faut privilégier l'usage des boîtes flexibles (flex box) qui s'adaptent automatiquement à la taille du média de consultation utilisé et privilégier les unités de longueurs relatives (%, em, rvw…) aux unités absolues comme le pixel. N'oubliez pas qu'aujourd'hui deux tiers des accès proviennent d'un smartphone et que si votre page n'est pas lisible, elle ne sera pas consultée.

Exemples de différentes feuilles de styles CSS2

Feuille interne :

à placer avant la balise </head> du document HTML

<style type="text/css">
body { background-image: url("imagefond.jpg"); }
p { margin-right: 10mm; margin-left: 10mm; margin-bottom: 1mm; font-weight: bold; font-size: 14px; line-height: 110% }
a { color: royalblue }
</style>

Feuille externe :

à placer avant la balise </head> du document HTML

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

(url de la feuille, ici au même niveau que le document).

Import d'une feuille externe à l'intérieur d'une feuille interne :

<style type="text/css">
@import url("uneFeuilleExterne.css");
body { background-image: url("imagefond.jpg"); font-family: "Times New Roman",serif }
p { margin-right: 10mm; […]
</style>

« style » à l'intérieur d'une balise :

Se fait en mettant une instruction style="[ensemble de règles CSS]" :

<table style="font:20px Comic Sans Ms; border:none; width:100%;" >
<B style="color:yellow;background-color: red;">texte en gras jaune sur fond rouge</B>

Class ou ID d'un sélecteur :

Un sélecteur est une class s'il commence par un point, une Id s'il commence par un dièse :

<style type="text/css">
.classA { …
#idB { …
.classC { …
#classC { … C'est une ID !
</style>

Dans le codage HTML, on invoque le sélecteur par sa class ou son ID sans indiquer le premier caractère :

<div class="classA"> …</div>
<p ID="idB"> …</p>

Combiner plusieurs classes et ID:

<div class="classA classC"> …</div>
<div class="classA" id="idB"> …</div>

Pseudo-sélecteurs : pseudo-éléments et pseudo-classes.

Le « pseudo-sélecteur » est un suffixe ajouté au nom du sélecteur, séparé de ce dernier par ":" et qui permet de désigner une portion de celui-ci, à laquelle peuvent être attachées des propriétés CSS spécifiques :

Les pseudo-éléments ":before" et ":after" servent à insérer un contenu généré avant ou après celui de l'élément.
Le pseudo-élément ":first-line" produit un style particulier sur la première ligne formatée d'un paragraphe.
Le pseudo-élément ":first-letter" peut être employé pour faire des capitales initiales et des lettrines.
Les pseudo-classes dynamiques : ":hover", ":active" et ":focus" et les pseudo-classes d'ancre : ":link" et ":visited" servent à styler dynamiquement un élément, notamment un lien lorsqu'il est survolé par la souris, sélectionné, visité…