Introduction au webdesign/CSS
Préambule
modifierLes CSS ou "feuilles de style" sont utilisées pour permettre de "styler", "d'habiller" les pages web.
Contrairement au "Modèle de Boîtes" abordé au chapitre précédent, les éléments (X)HTML ne sont utilisés que pour structurer les informations d'une manière "logique".
À quoi servent les CSS ?
modifierChaque rendu d'un élément (X)HTML peut être stylé en fonction de la nature de l'élément et de sa position dans le code HTML, de son "id" ou ses "classes". On peut ainsi déterminer :
- la police (de caractères)
- la bordure
- le fond
- la position
- l'empilement
- la visibilité
- le comportement (lorsqu'on passe la souris dessus, lorsqu'on la bouge...)
- la voix (pour les navigateurs vocaux ou les lecteurs d'écrans pour non-voyants)
et ce, selon que la page est affichée :
- sur l'écran d'un ordinateur
- par une imprimante (lorsqu'on imprime la page)
- par un navigateur vocal
- sur un "handled Device" (un PDA, Téléphone... ou tout matériel à petit écran)
- ...
Applications
modifierLes CSS, outre le fait de permettre simplement de styliser des pages web, permettent de les habiller différemment sans devoir toucher au contenu des pages. Ainsi, en séparant le contenu de la forme on parvient à une maintenance plus aisée, et on obtient quelque chose de plus joli, accessible et clair.
Les CSS permettent aussi de mieux cloisonner les métiers : le développeur développe, le webdesigner habille.
Enfin les CSS permettent de changer d'habillage comme on le souhaite : simplement pour faire joli, ou pour permettre à des mal voyants de mieux lire, en leur permettant de choisir un thème graphique plus contrasté, avec un texte plus gros, avec moins d'images...
Exemples
modifierL'exemple le plus complet permettant de montrer toute la puissance et les applications des CSS est le CSS Zen Garden (suivez ce lien pour la version française) qui permet de voir la même page web mais stylée différemment par des centaines de designers du monde entier.
