Les bases du CSS
Le CSS, ou Cascading Style Sheet, ou encore Feuilles de Style (en français), permet de mieux organiser vos documents et d'avoir une meilleure syntaxe. Il va aussi vous permettre de faire des pages valide xhtml/css conforment aux nouvelles normes W3C.
Nous allons donc voir comment faire pour faire un document css et le mettre en relation avec vos pages, et surtout comment cela simplifie votre document.
Syntaxe typique du CSS :
Un fichier css est en fait composé de plusieurs petites parties, chacune étant largement indépendant l'une de l'autre, car elle sert à une partie différente du document html. Chaque partie aura une syntaxe du genre :
.centre {
background-color: #336699;
font-size: 12px;
color: #FFFFFF;
}
On pourrait aussi écrire : .centre { background-color: #336699; font-size: 12px; color: #FFFFFF;}
Dans tous les cas ici on a crée un élément qui, qu'en il sera appelé dans le document html aura pour conséquence : de rendre le fond de l'élément pour lequel il sera appelée bleue, l'écriture sera blanche.
Tout ce qui est situé entre les { } peut varier et changer, il existe énormément de propriétés possibles , et elles seront détaillés dans un prochain tutoriel. Seulement entre chacune des propriétés il ne faut pas oublier le ;
Appelle d'une propriété du fichier css :
Tout d'abord il vous faut sauvegarder votre fichier css, par exemple en "style.css". Ensuite allez dans votre document html, entre les balises <head> et </head> mettez ceci :
<link href="style.css" rel="stylesheet" type="text/css">C'est ce qui permet a votre fichier de savoir dans quel fichier CSS il faut chercher la propriété que l'on va appeler. Ensuite, supposons que vous ayez fait votre page html avec des tableaux(<table>) ou des bloc (<div>) cela ne change rien, le système est le même (seulement les tableaux ne sont plus valables pour les normes W3C, mais nous le verrons dans un autre tutoriel), donc il vous reste plus qu'a mettre une petite ligne pour appeler votre propriété : class="center" (pour l'exemple qu'on avait pris plus haut, mais vous pouvez remplacer center par tout ce que vous voulez) Cet attribut est a placer dans la balise <table> ou <div> ou tout autre balise que vous souhaitez. Ainsi, vous mettez le document html et le document css dans le même répertoire et à chaque fois le document html ira chercher les informations nécessaires dans le css. Dans le prochain tutoriels nous allons voir les différentes propriétés que l'on peut appliquer à un élément.