III. CSS : Présentation du document▲
III-A. Introduction▲
Les trois notions fondamentales :
- le fichier est au format CSSÂ ;
- le document est à destination de l'internaute ;
- l'outil est un autre document (une page Web HTML).
Les CSS (Cascading Style Sheet = feuille de styles) sont des documents au format texte, tout comme le HTML. La différence est qu'une CSS n'est prévue ni pour être visualisée par l'internaute ni pour être affichée directement dans le navigateur. Une feuille de styles n'est qu'un document qui définit comment une page HTML doit être affichée. Le navigateur Web s'occupe de charger la CSS sans que l'internaute doive intervenir ; une CSS a pour vocation d'agir en arrière plan.
En utilisant des styles, il est par exemple possible de dire que tous les liens, au lieu d'être bleus ou violets comme on en a l'habitude, doivent être gris ; ou bien que le texte est toujours orange.
En fait, l'idée est que le navigateur parcourt le document HTML. Lorsqu'il rencontre une balise, il demande à la CSS de quelle manière il doit l'afficher. La CSS ne sait rien faire d'autre que dire comment doit être affiché tel ou tel élément de la page Web.
Les CSS sont l'un des éléments qui constituent le DHTML : Dynamic HTML.
III-B. Outils nécessaires▲
Pour créer des feuilles de style, vous pouvez utiliser les mêmes outils que pour vos documents HTML. Vous n'avez besoin de rien pour les visualiser puisque ce n'est pas l'objectif : leur utilité est d'être combinées aux documents HTML. Votre navigateur Web sait ce qu'il doit faire des CSS. N'hésitez pas à consulter notre page d'Outils CSSLes meilleurs outils pour développer en CSS.
III-C. Votre premier style▲
Il y a trois manières de définir des styles dans une page Web. La plus simple est d'utiliser l'attribut style de la balise que l'on veut modifier.
<h1 style="font-style: italic; size: 1.5em;">Titre de la page</h1>À l'intérieur de l'attribut style, il est possible de mettre n'importe quelle quantité de propriétés CSS : zéro, une, autant que l'on veut. L'ordre dans lequel on met ces propriétés influe rarement, nous n'allons donc pas nous en occuper pour le moment.
Un style s'écrit de la manière suivante : identifiant (nom du style) suivi de deux points, de la valeur et d'un point virgule. Dans l'exemple ci-dessus, nous avons les propriétés « font-style » et « size » avec les valeurs (respectivement) « italic » et « 1.5em ».
L'attribut style que je viens d'utiliser peut être ajouté à n'importe quelle balise HTML.
III-D. Formation▲
III-D-1. Organisme de référence▲
L'organisme de référence est le World Wide Web Consortium (W3C).
III-D-2. Nos ressources habituelles▲
- La FAQ CSS répond à vos questions posées dans nos forums.
- Les tutoriels CSSLes meilleurs cours CSS vous permettront d'apprendre tout ce dont vous avez besoin.
- Les livres CSSLes meilleurs livres CSS critiqués par la Rédaction pour toujours avoir une référence sous le coude.
- Le forum CSS vous permet de poser toutes vos questions qui ne trouvent pas réponse dans nos autres ressources.
III-D-3. Notre sélection de cours▲
CSSÂ : Notions de base▲
Pierre-Baptiste Naigeon vous présente son utilisation des CSS dans les pages Web avec son cours d'initiationTutoriel CSS : Notions de base.
Div et CSSÂ : une mise en page rapide et facile▲
Pierre-Baptiste a également prévu pour vous un tutoriel vous enseignant à moins utiliser la balise <table> : utilisez la balise <div> pour structurer vos documents.
Écrire du bon code CSS▲
Adrien Pellegrini a parlé des feuilles de style dans son guide : style de programmation.