Css
Des tutoriaux CSS gratuits
Le design du site, son apparence, constituent la partie la plus visible pour donner une première impression à un visiteur lorsqu’il ouvre un site. Mettre en gros, en gras les titres, changer la couleur des liens, afficher des données dans un tableau…
Toutes ces petites bricoles destinées à donner une belle allure à vos sites mais qui vous inquiètent parfois seront abordées dans ce tutoriel.
Pourquoi utiliser CSS ?
Pour mettre des couleurs et modifier la taille d’un texte par exemple, vous mettez peut-être en HTML quelque chose du genre :
La forme et le contenu se trouvent donc mélangés, et il vous faudra répéter ces modifications si vous voulez faire pareil ailleurs.
Pour une page, ce n’est pas difficile à réaliser. Cependant, imaginez si on doit faire cela pour toutes les pages d’un site web. A chaque modification d’un style, il faudra parcourir les lignes de chaque page afin de mettre à jour les définitions de tous les styles. Il deviendra alors rapidement fastidieux de répéter la même chose pour chaque page d’un site web.
Le pire, c’est que si jamais le thème du site change, il nous faudra refaire les mêmes tâches pour chaque page. Non seulement cela consommera énormément de temps, mais cela augmentera d’autant les possibilités d’erreurs.
S’il vous faut faire ça pour le site en entier, n’y a-t-il pas une manière de le faire sans perdre du temps, sans avoir à parcourir les pages une à une ? Les CSS vous permettent de vous épargner cette galère, puisque c’est leur rôle.
Malins comme on est, on sait qu’il y a une certaine uniformité pour toutes les pages d’un site web. Une possibilité envisageable serait donc de grouper ces propriétés quelque part et de les appeler en cas de besoin. Comme ça, on peut très facilement faire des modifications sans perte de temps.
D’où la notion de CSS ou Cascading Style Sheet traduite par feuille de style en cascade.
Cours pour apprendre le CSS
Avant d’apprendre le CSS, il est fortement conseillé d’avoir une notion de base en HTML/XHTML. Pour cela, vous pouvez consulter les tutoriaux XHTML sur ce même site. En ce qui concerne les outils, vous pouvez utiliser les mêmes outils que pour vos documents XHTML.
Vous aurez donc besoin au minimum d’un éditeur de texte comme le bloc-note par exemple. Il y a aussi d’autres logiciels plus spécialisés tel que Notepad ++ ou Dreamweaver qui vous permettront de créer vos styles plus facilement. Le choix vous appartient librement.
A part ça, il vous faut un peu de volonté et que vous vous donniez le temps d’apprendre. Dans ce tutoriel, nous allons aborder plusieurs notions en CSS. Dans un premier temps, nous allons surtout parler des choses basiques telles que la syntaxe de base et la notion de classe.
Ensuite nous allons voir les différentes mises en forme possibles du formatage d’un texte jusqu’à la manipulation des positionnements. Tout ceci, sans oublier d’appliquer le style en mettant en évidence la relation étroite entre XHTML et CSS.
A propos de l'auteur
Nicolas Galle est développeur web sénior pour l'agence Aseox.
