Prérequis
Avant de lire cet article, il est recommandé de connaître les bases du HTML, notamment les balises HTML. Le CSS s’applique directement à ces éléments pour contrôler leur apparence.
Le CSS (Cascading Style Sheets, ou Feuilles de Style en Cascade en français) est un langage informatique qui définit l’apparence visuelle d’une page web. Si l’HTML est le squelette d’une maison, avec les murs, les pièces et la structure, alors le CSS est la décoration intérieure, qui inclut la peinture, les meubles, les couleurs et la lumière. En d’autres termes, le HTML dit voici « un titre« , et le CSS dit « Ce titre doit être rouge, en Arial, taille 32 pixels« .
Quelle est l’origine du CSS et pourquoi a-t-il été créé ?
Au début du web, vers 1990, l’HTML était conçu uniquement pour structurer le contenu et non pour le mettre en forme. Les scientifiques du CERN qui l’ont créé avec Tim Berners-Lee valorisaient la logique et la structure, plutôt que l’esthétique.
Cependant, peu après la démocratisation du web, des milliers d’auteurs de pages web ont commencé à se plaindre. Ils ne pouvaient pas choisir leurs polices, leurs couleurs, ni leur mise en page. Marc Andreessen, créateur du navigateur Mosaic, résumait la situation avec humour en 1994 :
“In fact, it has been a constant source of delight for me over the past year to get to continually tell hordes (literally) of people who want to – strap yourselves in, here it comes – control what their documents look like in ways that would be trivial in TeX, Microsoft Word, and every other common text processing environment: ‘Sorry, you’re screwed.”
(Traduction française) En vérité, cela m’a procuré un amusement constant tout au long de l’année passée de devoir annoncer encore et encore à des hordes de personnes (et je pèse mes mots) qui veulent — tenez-vous bien — contrôler l’apparence de leurs documents de façons qui seraient d’une simplicité enfantine dans TeX, Microsoft Word ou n’importe quel autre outil de traitement de texte courant : « Désolé, mais vous n’avez aucun moyen de le faire. »
C’est dans ce contexte qu’Håkon Wium Lie, ingénieur norvégien travaillant avec Tim Berners-Lee au CERN, propose en octobre 1994 le concept de CSS. Son objectif était simple : séparer le contenu (HTML) de la présentation (CSS) pour donner aux auteurs le contrôle visuel qu’ils réclamaient, sans dénaturer la structure logique du HTML.
En décembre 1996, le CSS1 devient une recommandation officielle du W3C (World Wide Web Consortium), l’organisme qui standardise le web. En 1998, CSS2 suit. Aujourd’hui, le CSS continue à évoluer grâce au Cascading Style Sheets Working Group qui assure la maintenance et l’adaptabilité du langage au besoin des développeurs du monde entier.
Il n’y a pas de « CSS3 » ni de « CSS4 »
Contrairement à une idée reçue très répandue, il n’existe pas de version globale « CSS3 » ou « CSS4 ». Voici ce qui s’est réellement passé, d’après la classification officielle du W3C :
- CSS Level 1 : la toute première version, aujourd’hui considérée comme obsolète par le W3C lui-même
- CSS Level 2 / 2.1 : le socle central du CSS moderne, encore une référence aujourd’hui
- CSS Level 3 : à partir de ce niveau, le W3C a changé d’approche. Plutôt qu’un document unique et monolithique, le CSS a été découpé en modules indépendants (sélecteurs, couleurs, animations, grilles, etc.), chacun évoluant à son propre rythme
Le W3C est explicite sur ce point : il n’y a pas de CSS Niveau 4. Chaque module peut individuellement atteindre un niveau 4, 5, ou plus, mais le langage CSS dans son ensemble n’a plus de version globale depuis le niveau 3. Quand on parle de « CSS3 » aujourd’hui, on fait en réalité référence à un ensemble de modules distincts, pas à une version unique et figée.
Comment fonctionne le css ?
Affecter un style à un élément HTML se fait selon le modèle suivant :
Selecteur { propriete: valeur; }
- Le sélecteur correspond à un indicateur qui représente un élément au niveau de l’HTML.
- Les accolades représente le début et la fin des différentes propriétés affectées au sélecteur sélectionné.
- « Propriété : valeur » représente la liste des éléments qu’on choisie de modifier la couleur, font, hauteur, largeur… ou autre à l’élément HTML sélectionné.
En pratique
Imaginons que nous voulons modifier les propretés du texte :
p { color : green; font-size : 13px; text-align : left; }
Ou bien, pour une visibilité plus clair, Il est conseiller de l’écrire comme suit:
p {
color : green;
font-size : 13px;
text-align : left;
}
Information importante
Le W3C impose que tout navigateur ignore silencieusement une règle CSS qu’il ne reconnaît pas ou ne supporte pas, plutôt que de faire échouer l’affichage de la page. C’est ce mécanisme qui permet au CSS d’évoluer en continu depuis 1996 sans jamais casser les anciens sites : un navigateur récent comprend une vieille feuille de style, et un vieux navigateur ignore simplement les nouvelles règles qu’il ne connaît pas encore, sans planter.
Le CSS e l’arbre du DOM
Quand un navigateur charge une page, il transforme le HTML en une structure arborescente appelée le DOM (Document Object Model) — chaque balise devient un « nœud » relié aux autres selon la hiérarchie du document (voir notre article dédié sur le DOM).
Le CSS ne s’applique pas au texte brut du fichier HTML, mais directement à cet arbre. Quand un sélecteur cible un élément (par exemple p ou div), le navigateur parcourt l’arbre du DOM pour trouver tous les nœuds correspondants, puis leur applique les propriétés définies. C’est pour cette raison que la structure de votre HTML a un impact direct sur la facilité ou la difficulté à cibler précisément un élément en CSS : un DOM bien organisé rend le style plus simple à écrire et à maintenir.
