Aller au contenu

Introduction au webdesign/CSS

Leçons de niveau 4
Une page de Wikiversité, la communauté pédagogique libre.
Début de la boite de navigation du chapitre
CSS
Icône de la faculté
Chapitre no 5
Leçon : Introduction au webdesign
Chap. préc. :Modèle de boîtes
Chap. suiv. :Conseils et références
fin de la boite de navigation du chapitre
En raison de limitations techniques, la typographie souhaitable du titre, « Introduction au webdesign : CSS
Introduction au webdesign/CSS
 », n'a pu être restituée correctement ci-dessus.

Les 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 ?

[modifier | modifier le wikicode]

Chaque 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)
  • ...

Les 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...

L'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.