CSS signifie (Cascading Style Sheets : feuilles de style en cascade).
C'est un langage destiné à la présentation des documents HTML et
XML.
Les standards définissant CSS sont publiés par le World Wide Web Consortium
(W3C).
CSS a été introduit au milieu des années 1990.
Depuis 2000 CSS est couramment utilisé dans la conception de sites web, car bien pris en charge par les navigateurs web.
Objectif
L'objectif majeur de CSS est de séparer dans les documents la présentation du
contenu.
Par leur usage il est possible :
de décrire la structure d'un document en HTML,
de décrire la présentation de ce même document dans une feuille de style CSS séparée.
Les styles sont appliqués au dernier moment par le navigateur web.
Avantages
La structure du document et la présentation peuvent être gérées dans des fichiers séparés.
La conception d'un document se fait dans un premier temps sans se soucier de la présentation, ce qui permet d'être plus efficace.
Dans le cas d'un site web, la présentation est uniformisée : les documents (pages HTML)
font référence aux mêmes feuilles de style. Cette caractéristique permet :
une remise en forme rapide de l'aspect visuel.
une économie significative de bande passante, toutes les pages partageant la même mise en forme.
Avantages
Un même document peut présenter plusieurs feuilles de style, par exemple une pour l'impression et une pour la lecture à l'écran.
Certains navigateurs web permettent au visiteur de choisir un style parmi plusieurs.
Ne contenant ni balise ni attribut de présentation, le code HTML est considérablement réduit en taille et en complexité.
Avantages
Dans un document dépourvu de CSS un titre avec mise en forme peut s'écrire ainsi :
Pour respecter la base des règles de la communication visuelle, il faudra utiliser cette syntaxe dans chaque page du site, et pour chaque titre.
En CSS le code HTML aurait été (le style étant déporté dans un autre fichier) :
<h1>Le titre</h1>
CSS et médias
CSS permet de définir le rendu d'un document en fonction du médium de restitution.
Une approche WYSIWYG est dépourvue de sens dans un document hypertexte
étant donné que la cible du rendu n'est pas forcément connue du rédacteur du document.
On parle de web sémantique : on s'intéresse au contenu et nom au rendu, celui-ci étant à adapter au médium utilisé.
Quelques médias :
screen : écran d'ordinateur de bureau,
print : papier via une imprimante,
aural : audio via une synthèse vocale,
...
Les versions de CSS
CSS est développé par niveaux.
Chaque nouveau niveau doit intégrer le niveau précédent.
Le niveau CSS1 est publié le 17 décembre 1996,
Le niveau CSS2 est publié en mai 1998,
Le niveau CSS2.1 est publié en juillet 2007,
Le niveau CSS3 n'est toujours pas officiellement publié bien que de nombreuses
caractéristiques soient déjà supportées par plusieurs navigateurs.
Comment utiliser CSS
CSS est une norme :
elle précède les outils,
les outils ne couvrent pas tous les points de la norme,
mais les outils évoluent dans le sens de la norme.
Pour les CSS comme pour
le HTML, il faut :
s'assurer de la compatibilité de la norme CSS choisie avec les différents navigateurs,
n'utiliser des attributs CSS que s'ils appartiennent à la norme du W3C.
Il faut éviter l'utilisation d'attributs non normalisés !
Bien qu'il soit déconseillé d'utiliser des attributs non normalisés, les spécifications des CSS3 n'étant pas encore validées, de nombreux navigateurs ont réalisé une version expérimentale
à laquelle il est possible d'accéder par le nom de l'attribut préfixé par un nom lié au moteur de rendu du navigateur.
Par exemple pour les opérations de transformations dont le nom normalisé est transform sur les navigateurs de la famille webkit il sera possible d'utiliser
-webkit-transform, sur les navigateurs de la famille mozilla il sera possible d'utiliser -moz-transform, sur les navigateurs de la famille opera
il sera possible d'utiliser -o-transform...
Cette approche n'est pas à appliquer en production, mais rapidement ces attributs vont passer dans leur format normalisé. En attendant cela permet de se familiariser avec leur utilisation.
Bien qu'il soit déconseillé d'utiliser des attributs non normalisés, les spécifications des CSS3 n'étant pas encore validées, de nombreux navigateurs ont réalisé une version expérimentale à laquelle il est possible d'accéder par le nom de l'attribut préfixé par un nom lié au moteur de rendu du navigateur.
Par exemple pour les opérations de transformations dont le nom normalisé est transform sur les navigateurs de la famille webkit il sera possible d'utiliser -webkit-transform, sur les navigateurs de la famille mozilla il sera possible d'utiliser -moz-transform, sur les navigateurs de la famille opera il sera possible d'utiliser -o-transform...
Cette approche n'est pas à appliquer en production, mais rapidement ces attributs vont passer dans leur format normalisé. En attendant cela permet de se familiariser avec leur utilisation.