CSS

Cascading Style Sheets : feuilles de style en cascade.

Besoin

Définir l'apparence des balises HTML.

Analyse

Un style est un ensemble de paramètres déterminant le rendu visuel d'une balise, comme :

la fonte
les couleurs (avant-plan, arrière-plan, etc.)
l'espacement
la justification
la casse

La spécification des styles applicables à un document est contenue dans une feuille de style.

On prévoit de spécifier pour un document une série de feuilles de styles, dont certaines peuvent redéfinir les styles des précédentes. On parle alors de cascade de feuilles de styles, pour atteindre les buts de :

modularité : capacité à construire un style global à partir de feuilles de styles élémentaires
adaptabilité : appliquer les style adéquats en fonction des volontés des rédacteurs, des lecteurs, des cas d'utilisation, etc.

Conception

Une feuille de style est constituée de :

règles (rules), elles-mêmes constituées de :
- un sélecteur (selector) d'éléments auxquels appliquer le style, via (par spécificité croissante) :
  - leur type : nom d'élément : a, p, etc.
  - la classe qu'il leur est appliquée : .classe . La règle s'appliquera donc à tous les éléments ayant cette classe.
  - leur identité (id) : #id . La règle ne doit alors concerner qu'un seul élément (ou plusieurs mais via l'héritage du style) tel que en-tête, pied de page, navigation, barre latérale, etc.
- une déclaration : définition du style sous la forme d'une suite de :
  - propriété
  - valeur
- un poids, considéré en cas de conflits de redéfinitions entre règles. Par défaut les règles issues de l'auteur d'un document sont plus fortes que celles d'un lecteur par exemple.

Une feuille de style peut être :

interne : intégrée au contenu du document HTML
externe : référencée par le document HTML. Ce dernier choix permet de réutiliser la même feuille de style pour plusieurs documents, et donc de modifier l'apparence d'un ensemble de document à partir d'une seule feuille.

Implémentation

	Propriétés	1 (1996)	0 (1998)	1 (2011)	3 (2012)	4
	Propriétés	1 (1996)	2		3 (2012)	4
Texte	Propriétés de fontes (typeface, emphasis)			Sélection plus précise d'élément avec >, +, [attr], :first-child, etc.
	Couleur d'avant-plan, arrière-plan
	Espacement entre mots et lignes
	Alignement
	Marge, bordure, padding et positionnement
	Identification unique et classification générique de groupes d'attributs
Sélecteur	Element particulier	`#idElement`
	Classe d'élément	`.classe`
	Pseudo-classe d'élément		`classe:link classe:visited`
	Descendant d'élément	`parent child`

	Tous éléments	`[parent] *`
Images	Alignement, marge, bordure, padding et positionnement
Tableaux	Alignement, marge, bordure, padding et positionnement
Positionnement				`position: static`
	Relatif			`position: relative (top, bottom, left, right offsets)`
	Absolu			`position: absolute`
	Fixe			`position: fixed`
Affichage				`display: [none\|inline\|block]`
	index de profondeur media types aural style sheets bidirectional text new font properties (shadows)	Non	`z-index`
	bords arrondis				`border-radius`
	media-queries				`@media screen and (min-width: 400px) and (max-width: 700px) { … }`

Exemples

Un exemple de feuille de style CSS est :

<style type="text/css"> .mainTitle { // classe
        font-family: Verdana, Arial, Helvetica, sans-serif; font-size: larger } h1 { font-family: "Bookman Old Style";
        font-size: x-large; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none;
        text-align: left; word-spacing: normal; letter-spacing: 0mm } p { font-size: small; font-style: normal;
        line-height: normal; font-weight: normal; font-variant: normal; text-transform: none; text-align: justify;
        color: #000000; font-family: "Bookman Old Style"; clip: rect( ); text-indent: 20pt } ul {
        font-family: "Bookman Old
  Style"; font-size: small; list-style-position: outside; list-style-type: disc; text-align: justify

        }
 address { font-family: "Courier
  New", Courier, mono; 
 font-size: small; margin-left: 1cm
 }
 ol {
        font-family: "Bookman Old
  Style"; font-size: small; list-style-position: outside; list-style-type: decimal; text-align: justify

        }
 h2 { font-family: "Bookman Old
  Style"; font-size: large; font-style: normal; line-height: normal; font-weight: normal; font-variant:
        normal; text-transform: none; height: auto; margin-top: 25px; margin-right: 0; margin-left: 0; padding-top: 0;
        padding-bottom: 0; padding-left: 0; border: 0; black groove; clip: rect( ) } </style>

Un exemple de page Web (HTML) utilisant une feuille de style est :

<html> <head> <title>Test de
        feuille de style</title> <link rel="stylesheet" type"text/css" href="/monStyle.css" title="MonStyle">
        <style type="text/css"> <!-- @import url(http://javarome.net/basic); h1 { color: blue } -->
      </style> </head> <body> <h1>Ce titre 1 est bleu</h1> <p style="color: green">Alors
        que ce paragraphe est vert.</p> </body> </html>

Notes

CSS ne doit pas être confondu avec le standard XSL (eXtensible Style Sheet) lié à XML.
Des outils permettent une écriture simplifiée de feuilles CSS :
- Préprocesseurs (Meta-langage compilant du CSS)
  - CompaSS
  - LESS
  - SaSS
- Knacss : feuille de style utilitaire
- CSS Lint : Analyse en ligne de votre CSS et suggestions de corrections/améliorations

Références

Learn CSS Layout
"CSS", Can I use...