Le CSS ou Cascading Style Sheets est un langage informatique qui sert à mettre en forme les pages web et certains types de documents comme le XML. Les feuilles de styles en cascade sont nées 5 ans après l’apparition du HTML pour le compléter selon les spécifications de w3.org en 1996. Avant, on se servait en effet des codes HTML pour rendre les pages internet lisibles. Avec l’évolution du web, le CSS s’est aussi amélioré, il permet aujourd’hui d’avoir des sites web aux apparences bien soignées. La version qu’on connaît à l’heure actuelle est le CSS 3. Mais concrètement, qu’est-ce que le CSS nous permet de faire ?
L’utilité du CSS
Il nous permet de définir l’aspect visuel de nos pages web ou de nos documents rapidement et avec beaucoup plus d’efficacité. Grâce au CSS, les possibilités de mise en page sont assez nombreuses pour attirer et retenir l’attention des internautes sur nos sites.
Si avec le HTML, on devait écrire de longues lignes de codes à ne plus se retrouver sur chaque page pour les mettre en forme, ce n’est plus le cas avec le CSS. On peut désormais définir les styles de toutes les pages (la forme des bordures, la taille et la couleur du texte, le positionnement des images, etc.) en une seule fois et les centraliser. Les mises à jour en deviennent aussi plus faciles. Les codes sont également plus propres, car le CSS permet de séparer le contenu d’une page de sa mise en forme. S’il est bien géré (minimisé), il participe même au référencement naturel du site.
A quoi ressemble le code CSS ?
Il se traduit par une succession de règles dont la syntaxe est composée par un sélecteur (p dans l’exemple ci-dessus) et une ou plusieurs déclarations écrites dans des accolades. Une déclaration est constituée par une propriété (ici font-size et color) et une valeur (12px et black) séparées par deux points. Elle se termine toujours par un point virgule. Dans notre exemple, la règle est donc d’écrire le paragraphe en noir et avec une taille de police de 12 pixels.
Comment s’en servir ?
On se sert d’éditeurs de texte comme Notepad++, Sublime Text ou Dreamweaver pour écrire les codes CSS. Commencez toujours votre code par la règle @charset « utf-8 »; afin de définir l’encodage des caractères utilisés dans la feuille de style. Enfin, pour que votre CSS prenne effet, il est recommandé de créer un fichier spécifique avec une extension .css. Néanmoins, il est aussi possible de l’intégrer directement dans l’en-tête de la page (dans <head>) à l’intérieur de la balise <style>. On peut aussi ajouter un attribut style à toutes les balises mais cette méthode n’est pas propre, elle est fastidieuse, difficile à gérer et alourdit les codes. Il est à noter que ce sont les navigateurs qui interprètent les codes CSS et qu’il peut parfois y avoir des incompatibilités des codes avec certains.