La Feuille de style (Cascading Style Sheet, css) enrichit l'aspect visuel tout en conservant intact le code html structuré. Elle traite séparément les questions de présentation visuelle. Cette dualité répond à une double lecture : 1) pour les robots d'indexation des moteurs de recherche (ils n'ont rien à faire de la couleur du fond ni même des images...) et 2) pour les humains...
C'est pourquoi nous avons tardé avant d'aborder ce sujet: c'est dans l'espoir que vous fassiez bien la distinction entre l'approche sémantique et structurelle html et les raffinements visuels css. Ce souci explique la méthode imposée ici (et, plus tard, notée...).
Il y a d'autres moyens, qui sembleront parfois plus simples et plus directs. Mais c'est le moyen qui favorise le mieux la compréhension. La production, qui n'est pas notre but premier, découlera de la compréhension. Relecture, réglages et mises au point en seront largement facilités.
Bordure rouge, dessin de fleurs en background, couleur jaune pour le texte, dans une police serif à patins. Mêmes instructions pour ces deux blocs distincts, c'est une classe* appellée... luxe ! qui envoie les mêmes caractéristiques à autant d'éléments qu'on veut. Nous étudierons les classes lors du prochain cours, une fois assimilées les instructions de base.
* ensemble de caractéristiques regroupées sous un nom inventé
Comme la page html ou un script, une feuille de style est un fichier texte, une petite page munie du suffixe/extension.css, installée la plupart du temps à la racine du site (dans le dossier du site).
Pas de structure à saisir pour faire exister ce document, comme dans une page html ou un tableau. Il suffit d'aligner les instructions dans un langage correct css. Il ne faut pas oublier ensuite de lui lier les pages qu'on veut voir suivre ces instructions par la ligne suivante en head :
<link href="style.css" rel="stylesheet" type="text/css" /> avec le chemin correct.
Variante plus tendance: <style> @import url(style.css); </style>
On imagine ici que la feuille de style s'appelle "style.css" et est installée à la racine du site, au même niveau que les pages qui lui sont liées. Il faudra toujours savoir où est le fichier qu'on veut relier, et raisonner à partir de lui pour rédiger le chemin correct.
S'il faut "ressortir" d'un dossier pour "remonter" d'un niveau, on écrira "../style.css" Ici la feuille de style est dans le dossier au-dessus. ../../style.css Ici la feuille de style est deux niveaux au-dessus.
S'il faut aller la chercher "au-dessous" du niveau où se trouve la page que nous voulons relier à elle, nous écrirons:
"dossier/dossier/dossier/style.css" Par exemple pour relier l'autoprésentation à la feuille de style du site, situé dans un dossier. NB: à la place de dossier/dossier/dossier, imaginer le vrai nom de vos dossiers, et le nombre correct.
Visualiser la relation | Exemple simple à analyser | à télécharger pour le modifier
La feuille de style ayant l'extension.css, il faut nous y exprimer en langage css. Les instructions peuvent pour commencer être réglées balise par balise, sous la forme abstraite suivante:
balise { argument: valeur; argument: valeur; argument: valeur; }
Exemple de rédaction pour les balises body et h1:
body { background-color: red;}
h1 { font-family : verdana ; font-size : 24px ; font-color: gray ; margin : 10px; } autant d'arguments qu'on veut, toujours terminer par point-virgule.
Ne pas oublier de refermer l'accolade, autant faire ouvrir/fermer et remplir ensuite.
Les instructions ci-dessus sont donc envoyées à toutes les balises body et h1 dans toutes les pages liées à la feuille de style. Toutes ces balises body et h1 auront la même apparence.
Les balises body et h1 des pages non liées (à la feuille de style) n'auront pas de caractéristiques. Elles seront affichées en html standart (taille et graisse automatiques).
Donc dans toutes les pages.html reliées à cette feuille de style.css, chaque fois que la simple balise h1 sera utilisée, ce sont les caractéristiques définies dans la feuille de style qui vont s'appliquer. Idem pour les autres balises qui vont progressivement avoir aussi leurs instructions:
titres H2, h3, h4, h5 ;
corps de texte p, span, de listes ul, ol, li, de liens a...;
de relief dans le texte : b, i, strong, u, code, em, cite, tt ;
mais encore pour celle des tableaux :tr, td (titre-légende des tableaux),
ou des img pour leur attribuer dimensions, bordure ou marge.
Ne rédigez que ce dont vous avez besoin, au fur et à mesure. Vous savez faire l'aller/retour entre différents états de fichiers, ce sera moins difficile maintenant de faire en plus l'aller/retour entre page.html et style.css
Chaque page ainsi liée recoit les mêmes instructions. C'est un moyen puissant d'unifier la présentation du site.
Autre exemple: dans ce site de T.D., la présente page et les autres affichent toujours le code html en caractère Andale Mono sur fond vert entre les simples balises <code> et </code> . C'est parce que les instructions sont données sur la feuille de style "style.css" pour la balise <code>. Exactement:
code { background-color: rgb(200,255,160); font: normal 90%/100% 'Andale Mono', Monaco; line-height:1.4em; text-align: left; margin: 0;}
Chaque balise, que nous connaissons désormais pour avoir créé des pages HTML, peut recevoir en direct ses spécifications de style.
Pour la première mise en oeuvre, la pratique est importante. Si cela devient un peu répétitif, tant mieux, les arguments seront mémorisé. La prochaine séance nous permettra d'utiliser deux nouvelles méthodes plus souples pour insérer les instructions de style.
Pour l'intégralité des formules et des possibilités de réglage, on consultera utilement les ressources du W3C. On peut aussi "tenter" une formulation intuitive basée sur l'expérience : ça marche si l'on a déjà l'expérience du code. Cela devient un simple langage.
Bien sûr il faut TOUJOURS tester sur différents navigateurs et plateformes, car les navigateurs ne sont pas exactement équivalents dans leur interprétation des instructions de style (testez par exemple avec les balises de relief dans le texte...) srtout les plus récentes css3. Mais cela, vous l'avez compris maintenant, c'est un principe de travail .