CSS

Initiation au langage CSS

En 1996, un nouveau langage informatique allait révolutionner le web : le CSS (Cascading Style Sheets), en français feuilles de style en cascade. Nous devons ce petit bijou au Norvégien Hakon Wium Lie et au Hollandais Bert Bros. C’est seulement à partir des années 2000 qu’il fut très largement utilisé, lorsque tous les navigateurs l’eurent implémenté.

 

Principes

Avant l’arrivée de CSS, la présentation d’une page web était entièrement réalisée en HTML. La construction d’un site était alors très lourde. Supposons par exemple un paragraphe puis un sous-titre et un deuxième paragraphe. Au début de chacun de ces trois éléments, le code HTM devait préciser la couleur, la taille, la police, l’emplacement du texte (entre autres choses) du moins si le concepteur de la page souhaitait une présentation particulière. Si rien n’était indiqué, c’est le navigateur qui décidait pour lui (ça, c’est encore le cas).

D’où l’idée de placer la présentation dans un fichier à part, avec un langage parfaitement adapté à cette fonction.

Ainsi, il suffit d’écrire une seule fois comment un paragraphe ou un titre doit être écrit et disposé dans l’ensemble du site ou dans certaines pages particulières. Finie l'époque héroïque où les pionniers du web travaillaient dur, place à la facilité.

Concrètement, c’est dans la partie <head> que l’on place le ou les liens avec les feuilles CSS. L’instruction HTML est link et la référence au fichier appelé est href. Exemple :

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

On parle de cascade puisqu’un ou plusieurs fichiers viennent déverser leurs instructions dans une page HTML.

Il n’y a pas eu de versions successives de CSS mais des niveaux, c’est-à-dire que de nouvelles fonctionnalités se sont ajoutées aux anciennes sans les remplacer.

Aujourd’hui, plus précisément depuis HTML5, il n’est plus possible de coder la disposition des éléments d’une page en HTML.

 

Que fait CSS ?

Le principal atout est que l’on peut modifier très rapidement toute la présentation d’un site (positionnement des éléments dans une page, style du texte...).

Autre avantage, plusieurs styles sont applicables selon l’appareil de l’utilisateur. Par exemple, si vous lisez ce texte sur un ordinateur, vous remarquez qu’il est justifié (aligné à gauche et à droite). Sur téléphone mobile placé verticalement, les lignes de texte étant très courtes nous avons préféré de ne pas les justifier pour éviter des espaces peu esthétiques entre les mots. Dans le jargon du web, une présentation qui s’adapte au matériel est dit responsive. Autre possibilité permise par le langage CSS, celle d’afficher des caractères plus gros pour les malvoyants.

 

L’exemple de ce site

À défaut d’être un modèle du genre, le site que vous consultez actuellement peut tout de même servir d’exemple. À l'origine, il était écrit uniquement en HTML. Les consultations grimpèrent jusqu'en 2016 puis dégringolèrent. La raison ? Ce site n'était pas responsive alors que le téléphone mobile devenait l'outil numéro un pour l'utilisation d'Internet. Et sur mobile, l'aspect des pages était catastrophique. D'où une refonte totale du site avec fichiers CSS (et depuis, le nombre de consultations ne fait que grimper).

Les pages de contenu appellent deux fichiers CSS (sans compter les liens avec le logo).

1- Une page de styles communs à tous les textes et images du site, qui diffèrent néanmoins selon la largeur de l’écran de l’utilisateur.

Exemple de l’un des styles utilisés :

.Style3 {font-size: small;
font-style: italic;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
}

Vous remarquerez que le nom du style débute par un point.

La taille des caractères est définie par font-size, le style par font-style, la graisse par font-bold et la police par font-family. Si une caractéristique n’est pas précisée, le navigateur en emploie une par défaut : ici, font-style n’aurait pas eu besoin d'être précisé si ce style n’avait pas été l’italique. Petit détail : vous remarquerez trois polices ; si la première, Arial, n’est pas implémentée sur le navigateur, c’est la deuxième qui est appliquée et sinon la troisième.

Voir aussi l'exercice d'initiation au HTML.

2- Une présentation globale de la page qui comprend des styles ID. Ce sont les caractéristiques d’une zone unique dans la page, par exemple l’en-tête ou la barre de navigation. Le nom d’un style ID ne commence pas par un point mais par #.

Comme ce site comporte des pages de cinq couleurs différentes selon le sujet abordé (violet pour les maths, orange pour l’économie, etc.) et que la couleur fait partie des éléments de présentation, il y a cinq fichiers CSS avec styles ID mais chaque page HTML n’en appelle qu’un seul. Hormis les codes couleurs ils sont identiques puisque les autres caractéristiques (marges, justifications, ombrages…) sont les mêmes.

Le CSS gère aussi bien les couleurs du fond que celles du texte ou des hyperliens. L’aspect métallisé de la zone d’en-tête est aussi réalisé avec CSS ainsi que les dégradés de la colonne de gauche (qui n’apparaît pas sur les téléphones mobiles placés verticalement).

Par exemple, une zone appelée centre pour écran de taille supérieure à 960 pixels :

@media only screen and (min-width : 960px){

#centre {
margin-left: 22%;
margin-right: 17%;
}
}

Cet exemple est simple : seules les tailles des marges droite et gauche sont définies dans cet ID.

Voir aussi en page de lien hypertexte comment les couleurs des liens ont été définies.

Enfin, plaçons-nous dans la page HTML. L’exemple ci-dessous est celui de la barre de navigation (balise <nav>). Remarquez que dans cette balise se trouve un style (Style2 est défini dans le fichier styles.css) pour, notamment, la taille de caractère et la police ainsi qu’un ID appelé navbar (fichier pagegrise.css, commun à toutes les pages du site ayant un fond gris).

<nav id = "navbar" class = "Style2"> <ul>
<li><a href = "../index.html">Accueil</a> </li>
<li><a href = "../a_general/indexstats.html">Index stats</a> </li>
<li><a href = "../a_general/indexmath.html">Index maths</a> </li>
<li><a href = "../a_general/indexmet.html">Index métiers</a> </li>
<li><a href = "../a_general/indexses.html">Index éco-finance</a> </li> </ul>