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 plébiscité, 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, dites feuilles de style. 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.
Syntaxe
La syntaxe du CSS est très différente du HTML mais on retrouve les noms de balises. Ils deviennent des sélecteurs. Par exemple :
p {color: #0000EE;
}
p est le sélecteur paragraphe (souvenez-vous qu'en HTML un paragraphe est repéré par <p>). color est la propriété et #0000EE est la valeur (cette couleur est un bleu, voir le codage des couleurs).
Comme pour le HTML, les espaces, indentations, retours à la ligne et sauts de lignes n'ont pas d'importance en eux-mêmes mais ils en ont pour rendre le code agréable à lire.
On peut intégrer des commentaires comme ceci :
/* commentaire */
En pratique on utilise beaucoup les deux attributs class et ID. Voyons ceci.
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 qui s'est traduite par un nouvel essor, jusqu'à un pic lors du confinement de 2020.
Les pages de contenu appellent trois fichiers CSS (sans compter les liens avec le logo).
1- Premier fichier, une feuille 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 :
.Stylecartouche {
width: 90%;
height: 8%;
font-size: small;
font-family: Arial, Helvetica, sans-serif;
text-shadow: 0;
}
Vous remarquerez que le nom du style débute par un point. Il s'agit d'une classe. Dans le code HTML, l'attribut class est appliqué à un élément en particulier. En l'occurrence, Stylecartouche s'applique au texte tout en haut du header, au-dessus du titre. Et dans le code HTML de toutes les pages de ce site, les instructions concernant le cartouche s'écrivent :
<aside id="cartouche" class="Stylecartouche"><h5>Techniques et concepts de l'entreprise, de la finance et de l'économie <br>(et fondements mathématiques)</h5></aside>
La taille des caractères est définie par font-size, 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, pas besoin de font-style le style n’est pas en 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. Les couleurs ne figurent pas dans cette classe puisque selon les thèmes abordés les pages de ce site n'ont pas toutes le même code couleur. Nous y reviendrons.
Voir aussi l'exercice d'initiation au HTML.
2- Second fichier (pagecontenu.css). C'est 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 (voir la ligne de code HTML ci-dessus). En CSS, le nom d’un style ID ne commence pas par un point mais par #.
3- 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 cette signalétique fait partie des éléments de présentation, nous avons pris le parti d'ajouter un fichier CSS complémentaire réservé aux couleurs.
il y a donc plusieurs fichiers CSS avec styles ID mais chaque page HTML n’en appelle que deux, celui qui est commun à tous (marges, justifications, ombrages…) et celui des couleurs.
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.
