CSS au galop

Initiation/découverte

Cantine numérique, Quimper

Jeudi 25 Septembre 2014

Pol Guezennec


CSS c'est quoi?

CSS est un langage d'instructions de présentation visuelle pour les pages web. Ce langage est (un peu) différent de Html. C'est pourquoi nous y consacrons une 2e séance, séparée de la première.
CSS nous permet d'ajouter des caractères visuels à nos pages web tout en laissant intact Html dans son aspect structurant, descriptif et sémantique. En d'autres termes, repeindre et faire la déco pour les humains sans affecter les fonctionnalités Html de base pour les robots. Pour bien marquer cette différence nous donnerons ces instructions sur un fichier séparé mais relié à la page Html ( Il y a d'autres moyens, mais celui-ci est le plus pratique pour comprendre.). Les deux langages ont été séparés vers 2000 pour permettre des mises à jours plus faciles sur des sites comportant de nombreuses pages ou articles. La règle sera donc: une seule feuille de style contenant les instructions pour le site entier.


CSS ça veut dire quoi?

"Cascading Style Sheet", feuille de style en cascade.

Pourquoi "cascading"?

En cascade parce que plusieurs "sources" peuvent se combiner ( plusieurs fichiers, ou des instructions dans une feuille, dans le head, dans les balises.
En cascade aussi parce que les préférences utilisateur peuvent prendre le pas sur celles établies par l'auteur (pour l'accessibilité, navigateurs vocaux, mal voyants, peuvent appliquer des feuilles de style spécifiques.
Enfin, parce que des feuilles de styles différentes peuvent s'appliquer selon les contextes (projection ≠ écran ≠ impression par exemple)
Et encore parce que si on attribue une police à la balise body, l'instruction va se transmettre à toutes les balises "enfants" incluses, ou presque.


CSS ça sert à quoi?

Ce langage est capable d'appliquer à toutes nos balises html des couleurs ou des images de fond, des couleurs de caractères, des choix de polices, des largeurs, hauteurs, positionnement, bordure ou pas, marges extérieures, intérieures, alignements et autres raffinements pour faire approcher les publications web des publications papier. Néanmoins, sur le web nous devons parfois admettre d'être moins précis, plus souples: le support n'a pas de dimensions fixes constantes, mais des dimensions variables de grand écran luxe (2500 px) à téléphone portable (320px). C'est ce qu'on appelle "responsive design": la présentation change selon la taille de l'appareil. Le couple HTML/CSS est à la base de tout site web mais aussi des "livres électroniques", compromis plus stable entre page web et document papier.


Et comment ça marche?

.

Voyons les instructions CSS