CSS (Cascading Style Sheets)
Introduction
Les CSS ou feuilles de style en cascade sont un ensemble de règles qui permettent d'attribuer à toutes les balises un certain nombre de propriétés de mise en page, aussi bien pour les couleurs, les caractères qui le positionnement et les images. Le premier avantage des CSS par rapport aux attributs de style intégrés aux balises est de bien séparer le contenu du contenant. En effet le code HTML structure les informations et la CSS décrit son aspect formel. De plus, si on veut modifier des styles sur un site, on ne modifie que la feuille de style et non pas toutes les pages, cela fait gagner du temps.
Le mot cascade dans feuille de style de cascade exprime bien le principe des CSS : un parent définit le style de ses enfants. Les modifications d'un parent ont une influence sur le style des enfants, comme le montre l'exemple suivant :
CSS :
div>div {font-size:85 %;}
HTML :
<div>
Ce paragraphe a la taille par défaut
<div>
Le texte est plus petit
<div>
Encore plus petit
<div>
Encore plus petit
<div>
</div></div></div></div></div>
Résultat :
Mais les css sont conçues pour que le concepteur du site gère au mieux se style, sans contraintes. Tout d'abord il existe des style apr défaut, selon les balises, H1, H2, H3, CITE, LI, A,...
Tout comme le HTML, les feuiles de style ont connu différentes versions. Actuellement, les dernière version est le CSS3.
Écrire en CSS
La syntaxe employée pour écrire en css est la suivante : sélecteur{propriété:valeur;}.
On emploie des accolades, deux points et point virgule.
Le commentaire
On peut placer un commentaire dans sa feuille css, de cette façon : /* mon commentaire*/
Où écrire ses feuilles de styles?
CSS dans le <head>
La feuille se style, lorsqu'elle est courte, et dans le cas d'un mini site peut se rédiger dans l'en-tête du html, donc entre les deux balises <head></head>
<head>
<style>
body {color:#000000;}
</style>
</head>
CSS dans un fichier
Les feuilles de style se rédigent le plus souvent dans un document séparé dont l'extension est : .css. Ce fichier est placé soit à la racine du site, soit dans un dossier script. Il se rédige avec un éditeur de texte ou avec l'aide d'un logiciel comme Dreamweaver (payant), CSS Editor (payant), Eclipse (payant), free CSS Toolbox(gratuit).
Dans le html, entre les balises <head></head>, une ligne de code est inséré pour lier le document html aux css:
<link href="mesCSS.css" rel="stylesheet" type="text/css" />
Class et id
Pour agir sur un élément précis on peut employer une class. Par exemple si on veut que dans un tableau certaines cellules soient bleues et les autres vertes, on assigne une class à certaines td.
L'usage duclass est préconisé pour une valeur exceptionnelle d'une balise et répétée dans la page.
Pour un élément unique dans la page comportant une valeur différente, par exemple un seul paragraphe différent, on emploie alors l'id.