Feuilles de style en cascade
Le langage CSS (Cascading Style Sheets [kæ'ske?d?? sta?l ?i?ts] : feuilles de style en cascade) est utilisé pour décrire la présentation d'un document structuré écrit en HTML ou en XML, et c'est le World Wide Web Consortium (W3C) qui en a la direction.
Vue d'ensemble
CSS est utilisé pour définir les couleurs, les polices, le rendu, et d'autres caractéristiques liées à la présentation d'un document. L'objectif est de bien séparer la structure (écrite en HTML ou similaire) et la présentation (en CSS) du document. Cette séparation fournit un certain nombre de bénéfices, permettant d'améliorer l'accessibilité, de changer plus facilement de structure et de présentation, et de réduire la complexité de l'architecture d'un document. Enfin, CSS permet de s'adapter aux caractéristiques du récepteur.
HTML ne décrit que l'architecture interne, et CSS décrit tous les aspects de la présentation. CSS peut définir couleur, police, alignement de texte, taille, position, mais aussi le formatage non visuel, comme la vitesse à laquelle le document doit être lu par des lecteurs de texte.
Ainsi, les avantages des feuilles de style sont multiples :
-La structure du document et la présentation sont 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 Internet, la présentation est uniformisée : Les documents (pages « HTML ») font référence à la (aux) même(s) feuille(s) de styles. Cette caractéristique permet de plus un "relookage" rapide.
-Un même document peut donner le choix entre plusieurs feuilles de style (impression ou lecture à l'écran par exemple). Certains navigateurs web permettent d'accéder facilement à un choix de feuilles de style.
Le code HTML est considérablement réduit en taille et en complexité, puisqu'il ne contient plus de balises de présentation.
CSS utilise une pléthore de mots-outils anglais destinés à caractériser les éléments HTML. Voici l'exemple d'une portion de feuille de style :
p { font-size: 110%; font-family: Helvetica, sans-serif; }
h1 { color: white; background: red; }
Ce code CSS définit l'élément p (paragraphe) avec une taille de 110% et une police Helvetica, ou, si Helvetica est indisponible, une police générique. Quant aux titres (éléments h1) ils seront en blanc, sur fond rouge.
Le CSS permet aussi de définir plus précisément la manière de représenter un élément grâce aux id et aux class. Les identificateurs (id) sont utilisés pour caractériser un élément unique (un menu, un mot...), mais les classes (class) sont utilisées pour caractériser un ensemble d'éléments (comme des menus organisés de manière similaire).
Par exemple : l'on place dans le fichier de contenu (fichier HTML, ou similaires), comme ceci :
<p class="beauParagraphe">Je suis né en Alsace. [...]</p>
et dans le fichier de contenant :
.beauParagraphe { text-indent: 1em; }
Ceci donnera un alinéa à la classe .beauParagraphe, soit ici la phrase « Je suis né en Alsace. »
La présentation est donc bien séparée du contenu. (C'est suite à la prise en compte des avantages de CSS que le W3C déconseille maintenant les éléments et les attributs de présentation en HTML, comme align="" ou <font face="">.)
Les descriptions CSS peuvent être données à l'intérieur d'un document HTML, ou importées séparément dans le lecteur. Cette possibilité donne une certaine flexibilité à CSS. De plus, CSS peut être utilisé avec XHTML, XML, ou avec n'importe quel format de document structuré correctement implanté dans un logiciel ou dans un navigateur.
Les feuilles de style peuvent contenir des commentaires. La syntaxe est la suivante : /* commentaire */
Un grand merci au wikipedia pour ce document (version originale ici).