L'utilisation des CSS pour mettre en forme du contenu HTML est semblable à la décoration d'un sapin de Noël : on accroche diverses décorations (ie des propriétés de style) aux branches du sapin (ie l'arbre DOM représentant l'imbrication des éléments HTML)

### Définitions

La mise en page et la mise en forme du contenu HTML se fait avec des règles de style.

Une règle de style nous permet de :

- définir la mise en forme que nous voulons appliquer à cet élément HTML,
- définir l'élément HTML que nous voulons mettre en forme.

une règle de style

Pour définir les éléments HTML auxquels accrocher des déclarations de style, on utilise un sélecteur.

Pour définir la mise en forme à appliquer, nous utilisons des déclarations de style.

Une déclaration de style est consituée par une propriété de style associée à une valeur.

Les propriétés de style permettent d'agir sur les les différents aspects de présentation (couleurs, polices de caractères, fond, positionnement, dimensions, etc). Elles sont définies dans les spécifications du W3C. Une propriété a toujours une valeur.

Les valeurs que l'on peut donner aux propriétés de style sont elles aussi définies dans les spécifications du W3C.
Une valeur peut être :

- un mot-clé
- un nombre d'unités
- une liste de noms
- une fonction CSS
- un identifiant de couleur

Une feuille de style CSS est composée d'un ensemble de règles de style. Elle peut être interne (écrite dans le code HTML dans l'élément `style`) ou externe (liée au fichier HTML par l'élément `link`).

le contenu d'une feuille de style
Une règle de style est parfois appelée "jeu de règles" ou "bloc de règles".

Voir aussi Vocabulaire CSS

### Syntaxe

Le W3C définit les CSS comme un "mécanisme" et pas comme un langage.

Une règle de style s'écrit en utilisant une syntaxe particulière, propre aux CSS.

syntaxe d'une règle de style

Des accolades `{` et `}` DOIVENT entourer la ou les déclarations (couples propriétés/valeurs).

le caractère `:` (deux points) est utilisé pour affecter une valeur à une propriété.

La principale erreur que l'on fait quand on commence à écrire des feuilles de style CSS est d'utiliser le signe `=` à la place du caractère `:`

Les noms des propriétés ne sont pas sensibles à la casse et peuvent s'écrire indiféremment en majuscules, minuscules ou dans un mélange des 2. La pratique fait que les noms de propriétés sont toutjours écrits en minuscules.

Dans 99% des cas, une règle de style contient plusieurs déclarations. On parle alors de bloc de déclaration.

Un point virgule `;` DOIT séparer les déclarations dans un bloc de déclarations.
Exemple :

    body {
    	background: #FFF;	/* couleur de fond */
    	color: #000;		/* couleur des caractères */
    	font-size: 15px;	/* taille de la police */
    	margin: 0 0 1em 0;	/* marges extérieures */
    	padding: 0;			/* marges intérieures */
    	}

sélecteurs

Les sélecteurs sont la partie la plus importantes des CSS. Ils peuvent avoir des formes très simples (le nom d'un élément HTML) ou très complexes pour cibler précisément des éléments HTML profondément enfoui dans les imbrications de la page.

Quelques exemples de sélecteurs :

    /* le sélecteur est un élément HTML : le style sera appliqué sur
       tous les éléments <a> de la page */
    a {
    	color: #0000EE;
    	cursor: pointer;
    	}

    /* le sélecteur est l'état d'un élément HTML : le style sera
       appliqué sur tous les éléments <a> survolés par la souris */
    a:hover {
    	color: #AA0026;
    	outline: 0;
    	}

    /* le sélecteur est une classe : tous les éléments HTML qui
       auront un attribut class avec la valeur dialogue */
    .dialogue {
    	position: relative;
    	background: url(../cssimg/dialogue.png) no-repeat;
    	margin: 1em auto;
    	min-height: 232px;
    	width: 580px
    	}

    /* le sélecteur est un sélecteur complexe qui permet de
       sélectioner les éléments <ul> qui se trouvent les enfants
       directs dans des éléments <div> qui se trouvent les
       enfants directs d'un élément HTML unique identifié par
       le nom MENU-tuto */
    #MENU-tuto > div > ul {
    	background: #FEF293;
    	border: 1px solid #999;
    	border-radius: 0 0 4px 4px;
    	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    	line-height: 1.7;
    	margin: -6px 0 0 12px;
    	padding: 6px;
    	position: absolute;
    	width: 200px;
    	}

Dans un bloc de déclarations, rien n'oblige à sauter une ligne entre les déclarations et à mettre certains espaces.

    #MENU-tuto > div > ul {
    	background: #FEF293;
    	border: 1px solid #999;
    	border-radius: 0 0 4px 4px;
    	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    	line-height: 1.7;
    	margin: -6px 0 0 12px;
    	padding: 6px;
    	position: absolute;
    	width: 200px;
    	}

est totalement équivalent à :

    #MENU-tuto>div>ul{background:#FEF293;border:1px solid #999;
    border-radius:0 0 4px 4px;box-shadow:0 2px 4px rgba(0, 0, 0, 0.2);
    line-height:1.7;margin:-6px 0 0 12px;padding:6px;position:absolute;
    width:200px;}

Il est aussi totalement évident que le premier code est totalement plus facile à lire que le second. Donc adoptez totalement la première forme de présentation, d'autant plus que les fichiers CSS comptent généralement plusieurs centaines (voir plusieurs milliers) de lignes.