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?
.
- La feuille de style est un fichier texte appellé "style.css" ou "ce-que-vous-voulez.css" installé dans le dossier de site.
- Les pages HTML sont reliées à la feuille de style par une simple ligne de code à la fin de la partie head. Une fois les deux documents reliés, la page Html consulte automatiquement la page css pour savoir comment elle doit afficher les données. Visualiser la relation
- La "ligne directe" à installer en dernière position dans le head pour les relier :
<link href="style.css" rel="stylesheet" type="text/css" />
- Variante plus mode :
<style> @import url(style.css); </style>
- Démonstration: Exemple simple | à télécharger pour le modifier
- Comme l'Html, le css c'est du texte, avec toutes les informations de chemins nécessaires pour aller chercher les ressources. C'est ce qu'il y a de plus léger, de plus rapide à traiter pour l'ordinateur et le navigateur. Pas besoin d'un logiciel spécial: on peut l'écrire avec n'importe quel texteur de base.
Voyons les instructions CSS