Cours CSS l’incorporation dans HTML

Cours CSS l’incorporation dans HTML, tutoriel & guide de travaux pratiques en pdf.

Les notions de base

Créer une feuille de style simple est facile. On a besoin de connaître un peu de HTML et quelques termes de base de la publication par ordinateur. Par exemple, pour rendre bleu les éléments ‘H1’, on écrit :
H1 { color: blue }
L’exemple ci-dessus est une simple règle CSS. Une règle consiste en deux parties : un sélecteur (‘H1’) et une déclaration (‘color: blue’). La déclaration comprend deux parties : la propriété (‘color’) et la valeur associée (‘blue’). Bien que cet exemple n’agisse que sur une seule des propriétés nécessaires au rendu d’un document HTML, cela suffit pour qu’elle soit qualifiée de feuille de style. Combinée avec d’autres feuilles de style (la combinaison de feuilles de style est une fonction fondamentale des CSS), elle agira sur la présentation finale du document.
Le sélecteur est le lien entre le document HTML et la feuille de style, tous les types d’éléments HTML pouvant être des sélecteurs. Les types d’éléments HTML sont définis dans la spécification du HTML.
La propriété ‘color’ fait partie de la cinquantaine de propriétés qui déterminent la présentation d’un document HTML. La liste des propriétés et leurs valeurs possibles est définie dans cette spécification.
Les auteurs HTML ne devraient écrire des feuilles de style que pour suggérer un style particulier à leurs documents. Chaque agent utilisateur (navigateur ou client Web) est pourvu d’une feuille de style par défaut qui présente les documents d’une manière (sinon banale) tout au moins raisonnable. L’annexe A contient un exemple de feuille de style pour la présentation de documents HTML tel que suggéré dans la spécification du HTML 2.0.
La grammaire formelle du langage CSS1 est définie dans l’annexe B.

L’incorporation dans HTML

Pour que les feuilles de style puissent avoir une influence sur la présentation, les agents utilisateurs doivent en connaître l’existence. La spécification HTML [2] définit la façon de relier HTML aux feuilles de style. Ce chapitre est donc informatif et non normatif :
L’exemple montre quatre façons de combiner le style au HTML : avec l’élément ‘LINK’ vers une feuille de style externe, avec l’élément ‘STYLE’ à l’intérieur de l’élément ‘HEAD’, avec une feuille de style importée à l’aide de la notation CSS ‘@import’ et enfin avec l’attribut ‘STYLE’ d’un élément (ici ‘P’) dans ‘BODY’. Cette dernière option mélange style et contenu, et on perd de ce fait les avantages d’une feuille de style traditionnelle.
L’élément ‘LINK’ fait référence à des feuilles de style alternatives que le lecteur peut sélectionner, alors que les feuilles de style importées sont automatiquement combinées avec les autres feuilles de style.
En pratique, les agents utilisateurs ignorent les balises qui leur sont inconnues. Une conséquence, les vieux agents utilisateurs ignoreront l’élément ‘STYLE’, mais non son contenu qui sera traité comme faisant partie du corps du document, et qui sera rendu comme tel. Pendant une période transitoire, le contenu de l’élément ‘STYLE’ peut être caché à l’aide de commentaires SGML :

Comme l’élément ‘STYLE’ est déclaré dans le DTD en tant que « CDATA » (défini dans [2]), les interpréteurs conformes à SGML ne confondront pas la feuille de style avec un commentaire et en tiendront donc compte.

Le regroupement

Pour réduire la taille des feuilles de style, on peut grouper des sélecteurs dans une liste en les séparant par des virgules :
H1, H2, H3 { font-family: helvetica }
De même, on peut grouper les déclarations :
H1 {
font-weight: bold;
font-size: 12pt;
line-height: 14pt;
font-family: helvetica;
font-variant: normal;
font-style: normal;
}
De plus, quelques propriétés ont leur propre syntaxe de regroupement :
H1 { font: bold 12pt/14pt helvetica } qui équivaut à l’exemple précédent.