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.

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).

Voir aussi Vocabulaire CSS

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

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é.

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 */
	}

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.