La mise en forme d'un document html se fait principalement par CSS même si quelques propriétés HTML sont souvent utilisées aussi à des fins de mise en forme.

La forme générale d'une règle CSS est 

selecteur {
            attributCSS: valeur;
            attributCSS:valeur;
            ...
            }

Exemple: 

.slide {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	background-color: #000000;
	height: 1024px;
	width: 1280px;
	color: #FFCC99;
}

Les trois types de sélecteurs de base sont:

  1. les sélecteurs d'éléments HTML
  2. les sélecteurs de classe.

    Dans la CSS, on les reconnait au fait qu'il sont toujours précédés d'un ".".

    Les sélecteurs d'une classe quelconque, nommée par exemple "classeA", identifient tous les éléments HTML qui sont associés à l'attribut class="classeA" dans le document HTML.

    Exemple:

    Côté CSSCoté HTML
    .classeA{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	background-color: #000000;
	height: 1024px;
	width: 1280px;
	color: #FFCC99;
}
    		 
    <div class="classeA">

   <h1>blablabla bla...</h1>
   <p>....</p>

</div>

  3. les sélecteurs d'id.

    Dans la CSS, on les reconnait facilement car ils sont toujours précédés d'un "#". Dans le document HTML, en général, on essaie de réserver les id pour identifier de manière unique un élément et on associe un id (par exemple "id_1") à cet élément HTML en ajoutant id="id_1" dans la balise ouvrant dudit élément HTML.

    Exemple:

    Côté CSSCoté HTML
    #id_1 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	background-color: #000000;
	height: 1024px;
	width: 1280px;
	color: #FFCC99;
}
    		 
    <div id="id_1">

   <h1>blablabla bla...</h1>
   <p>....</p>

</div>

Composition des sélecteurs de base :

La composition de sélecteurs de base permet de créer de nouveaux sélecteurs. Trois types de composition différents sont possibles.

  1. le sélecteur multiple utilise la virgule

    Il n'est pas rare d'avoir à spécifier une propriété de style commune à plusieurs éléments. Par exemple, on veut tous les titres avec la même couleur de police. Dans ce cas, on peut utiliser un sélecteur multiple qui est composé de plusieurs sélecteurs de base, séparés par des virgules

  2. le sélecteur concaténé grâce au point

    Parfois il est utile de spécifier un style spécial pour un élément qui se trouve à l'intersection de plusieurs styles. Par exemple, on veut un style général pour un logo. Un style général pour les pieds de pages. Mais lorsqu'un logo se trouve dans un pied de page on veut qu'il ait un style différent du style général. Dans ce cas, on concatène des sélecteurs pour créer un nouveau sélecteur qui sélectionnera les logos apparaissant dans un pied de page. Pour concaténer plusieurs sélecteurs on utilise le point entre les différents sélecteurs impliqués.

  3. le sélecteur utilisant un chemin dans la hiérarchie html se construit avec l'espace

    Pour spécifier un style qui sélectionne des éléments html seulement lorsque ceux-ci se trouvent dans un contexte particulier dans le document html, on va créer un nouveau sélecteur à partir de plusieurs sélecteurs de base espacés par des ... espaces ;-).

    Par exemple, on veut un style pour les éléments d'une liste (de type li)mais, on veut un autre style, lorsque les éléments de liste sont imbriqués dans une autre liste, on peut créer un selecteur li li pour y associer le style des éléments de la sous-liste et li li peut être vu comme un bout de chemin dans l'arbre HTML du document associé.

    NB: Si vous n'avez par encore vu qu'un document html pouvait être considéré comme en arbre et ce que l'on entend par parents et/ou par enfants, prenez le temps de le comprendre, par exemple en regardant ici.

  4. Exemples
    Composition de sélecteurs......qui sélectionnent
    h1, h2, h3
    		sélectionne tous les titres de niveau 1, 2 et 3. Remarquez les virgules entre les sélecteurs de base.
    #footer.logo
    		sélectionne le logo du pied de page, si on fait l'hypothèse que le pied de page est associé au style identifé par #footer et le logo est associé au style .logo. C'est un sélecteur obtenu par concaténation. Remarquez le . entre les sélecteurs
    li li
    		 Sélectionne les éléments de type li qui apparaissent comme enfants d'éléments de type li

Pour aller plus loin

La plupart des pages web que vous consultez ont des CSS visibles. Pour lire le source html et le css d'un élément, il suffit avec Firefox de faire bouton droit de la souris, examiner l'élément.

De nombreux exemples de CSS se trouvent sur le web à commencer par ceux du jardin Zen.