L'image ci-contre illustre les possibilités du CSS, basées sur le principe de séparation de la structure ( le code HTML ) et de la mise en page ( alors traitée par une feuille de style CSS ).

Il s'agit de 4 captures d'écran provenant du site CSSZenGarden, où les plus grands graphistes montrent leurs talents en mettant une forme une même structure HTML.

Avec les balises HTML suivantes :

<h1>...</h1>
 
<p>...</p>
 
<br />
 
<hr />
 
<ol>
  <li>...</li>
</ol>
 
<ul>
  <li>...</li>
</ul>
 
<img src="" alt="" />
 
 
<a href="">...</a>
 
 
<table>...</table>

il est déjà possible de réaliser la structure de la plupart des pages web existantes ( il existe beaucoup d'autres balises, mais qui ne seront pas forcément nécessaires pour les pages simples ).

Mais seulement la structure.

Si cette structure est propre et bien faite, on peut alors se poser la question de la mise en page pour rendre la page plus attrayante. Pour cela, nous utiliserons une Feuille de Style CSS ( Cascading Style Sheet ).

C'est un fichier texte à part qui va contenir toutes les informations de mise en page pour l'ensemble du site. Une modification de cette page permet donc de changer toutes les pages d'un site, ce qui est beaucoup plus avantageux que de modifier chaque page une à une.

Ce langage qui consiste à séparer la mise en page avec la structure s'appelle le XHTML, alors que le langage HTML comprend dans la même page la structure ET la “décoration”, ce qui est peu lisible.

Créer un fichier texte et le renommer en style.css ( le nom avant l'extension importe peu ).

La syntaxe dans un feuille de style est simple, elle est du type :

Balise {
  Règle 1;
  Règle 2;
  ...
}

Ce qui donne par exemple ( les ”;” sont absolument nécessaires pour marquer une fin de règle ) :

h1 {
  color:blue;
  text-align:center;
}

<link rel="stylesheet" media="screen" type="text/css" href="style.css" />

Utiliser le lien suivant pour mettre en forme et en couleurs la page d'index :

Couleurs en hexadécimal

Voici un tableau regroupant les propriétés et attributs CSS les plus courants :

Important

Pour un lien “a”, il existe quatre sélecteurs CSS particuliers :

• :link ( que l'on note par a:link dans la feuille de style ), qui désigne le lien tel qu'il va apparaitre,
• :hover ( que l'on note par a:hover dans la feuille de style ), qui désigne le lien tel qu'il va apparaitre lorsque la souris le survole,
• :visited ( que l'on note par a:visited dans la feuille de style ), qui désigne le lien tel qu'il va apparaitre lorsqu'on a déjà cliqué une fois dessus,
• :active ( que l'on note par a:active dans la feuille de style ), lorsque le lien pointe vers la page en cours de lecture.

Si vous voulez appliquer des couleurs personnalisées, il est utile d'avoir compris la notation hexadécimale d'une couleur ( on pourrait aussi utiliser la notation RGB... ). Voir l'article à ce sujet : couleurs en hexadécimal, et vous pourrez à l'aide de GIMP choisir vos propres couleurs.

Différences entre balises bloc et en-ligne

Seules les balises en bloc peuvent avoir des propriétés de largeur ( width ) et de hauteur( height ). Les unités les plus utilisées sont px ( pixel ), em ( dimensions de l'utilisateur ) et %. L'utilisation des dimensions permet notamment de simplifier la mise en page.

De plus, les règles de positionnement sont différentes entre les balises en bloc et les balises en ligne :

• les blocs se mettent les uns en dessous des autres par défaut,
• les éléments en ligne se mettent les uns à côté des autres dans la mesure du possible, par défaut.

<a href="http://www.wikipedia.org"> <h2> Lien vers wikipédia </h2></a>

Création d'un bloc

Soit le bloc est contenu dans une balise ( du type “ol” par exemple ), soit il faut créer le bloc soi-même.

Dans le premier cas, il suffit de personnaliser la balise “ol”. deux outils sont à notre disposition : id et class.

La différence pincipale est qu'un id ne peut être utilisé qu'une seule fois, tandis que class peut l'être plusieurs fois. Donc dans la pratique, on préfèrera utiliser les id pour des éléments de nature unique ( entête, menu, pied de page, etc... ), et class pour des éléments ayant tendance à se répéter dans la page ( paragraphes particuliers, liens particuliers, etc... ).

Par exemple :

<ol id="menugauche">
  <li><a href="index.html#html">Langage html</a></li>
  <li><a href="index.html#php">Langage php</a></li>
  <li><a href="index.html#css">Langage css</a></li>
  <li><a href="index.html#autre">Autres exemples</a></li>
</ol>

On a donc besoin de spécifier les propriétés de l'élément menugauche dans la feuille CSS. Pour marquer le fait qu'il s'agisse d'un id, il faut faire précéder son nom par un dièse # :

#menugauche {
  propriété 1;
  ...
}

<ol class="menugauche">

et dans le CSS, il faut faire précéder le nom de class par un point . :

.menugauche {...}

Dans le deuxième cas, c'est-à-dire si il faut créer le bloc soi-même, on regroupe les éléments dans une balise div :

<div id="menugauche">
  <h3>Sommaire</h3>
 
  <ol>
    <li><a href="index.html#html">Langage html</a></li>
    <li><a href="index.html#php">Langage php</a></li>
    <li><a href="index.html#css">Langage css</a></li>
    <li><a href="index.html#autre">Autres exemples</a></li>
  </ol>
 
  <a href="article1.html">Lien vers la page suivante</a>
</div>

Le formatage sur l'ensemble de ces éléments se fera donc sur l'id menugauche, ce qui nous permettra par exemple de mettre la même couleur de fond pour la balise h3, la liste ol et le lien a de ce bloc.

Remarques :

• Il ne faut pas abuser des balises div, car cela peut ne pas produire de langage propre. Il y a suffisamment de balises HTML pour faire un bon fichier CSS.
• Pour effectuer un formatage particulier sur un morceau de texte, on peut utiliser la balise span, à ne pas confondre avec div.

Par exemple :

<p>Ceci est un paragraphe avec un mot <span class="soulignerouge">souligné et en rouge</span>.</p>

On écrira dans la feuille CSS :

.soulignerouge {
  text-decoration: underline;
  color:red;
color:red; }

position:absolute;
left:30px;

float:left;

Nous avons ici essayé de positionner le sommaire. Il est temps de donner quelques petites explications à ce sujet.

Les types de positionnement

Il y a cinq types de positionnement :

• avec les marges : simplement en utilisant les marges entre les différents blocs.
• relatif : qui va toujours dépendre du bloc qui le contient, mais les éléments restent dans le flux,
• absolu : fixé dans la page, quelque soit les éléments autour,
• fixe : presque comme absolu, à la différence que le positionnement ne change pas lorsque l'on fait défiler la page,
• flottant : l'élément est retiré du flux pour se placer soit à gauche, soit à droite. Tous les autres éléments se placent alors “autour” de celui-ci.

Illustrons ces types de positionnement avec des exemples.

Nous allons travailler avec le code HTML suivant :

<h1>Positionnement</h1>
 
<div id="conteneur">
 
  <p id="par1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
  Aenean commodo ligula eget dolor. Aenean massa. 
  Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
 
  <p id="par2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
  Aenean commodo ligula eget dolor. Aenean massa. 
  Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
 
</div>

Rien de bien spécial : deux paragraphes "frères" ayant pour parent un div possédant l'id "conteneur".

Le CSS associé au début est :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

#conteneur {
  background-color:black;
  color:yellow; 
  width:500px;
}
 
#par1 {
  background-color:blue;
  width:250px;
}
 
#par2 {
  background-color:red;
  width:300px;
}

Code assez facile à interpréter. C'est ce code que nous allons changer au fur et à mesure pour comprendre les différents aspects du positionnement.

Pour voir le résultat : BASE.

Rappels des règles importantes :

1. par défaut, les éléments apparaissent dans le flux, c'est-à-dire dans l'ordre dans lequel ils interviennent dans le code HTML,
2. par défaut, les éléments blocs s'affichent les uns en-dessous des autres,
3. par défaut, les éléments en ligne s'affichent les uns à côtés des autres.

On observe déjà les règles 1. et 2. dans le code de BASE.

AVEC LES MARGES :

On déplace le premier paragraphe à l'aide des marges ( propriété margin ) à la ligne 10. Rappel : dans la notation simplifiée de margin, on peut écrire les quatre marges d'un coup, dans l'ordre top right bottom left ( sens des aiguilles d'une montre en partant du haut ) :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

#conteneur {
  background-color:black;
  color:yellow; 
  width:500px;
}
 
#par1 {
  background-color:blue;
  width:250px;
  margin:50px 20px 100px 80px;
}
 
#par2 {
  background-color:red;
  width:300px;
}

Voir le résultat : MARGES-1.

Remarques :

1. Tous les éléments restent dans le flux.
2. Les marges s'appliquent presque toujours vis-à-vis du bloc le plus proche. Je reviens sur le "presque" tout de suite.
3. En raison de la marge  "bottom" du paragraphe 1, le paragraphe 2 est poussé vers le bas.
4. Bizarrement, la marge "top" n'a pas d'effet, et le paragraphe 1 reste collé au div "conteneur".  En fait la marge est effectuée en fonction de la balise h1, et ceci est dû à la règle CSS de fusion des marges.

Pour corriger ce dernier point, on peut par exemple donner un "padding" au div "conteneur" ( comme expliqué dans le lien ci-dessus ) :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

#conteneur {
  background-color:black;
  color:yellow; 
  width:500px;
  padding-top:1px;
}
 
#par1 {
  background-color:blue;
  width:250px;
  margin:50px 20px 100px 80px;
}
 
#par2 {
  background-color:red;
  width:300px;
}

Voir le résultat : MARGES-2.

Une petite question pour la route : que se passe-t-il si la marge droite de #par2 est supérieure à 200px ?

RELATIF :

Cela se précise comme on le voit à la ligne 10, puis on donne les espacements voulus dans les lignes suivantes ( 11 et  12 ).

Ces espacements se font à partir du bloc parent ( à savoir dans cet exemple le div "conteneur" ) :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

#conteneur {
  background-color:black;
  color:yellow; 
  width:500px;
}
 
#par1 {
  background-color:blue;
  width:250px;
  position:relative;
  top:150px;
  left:200px;
}
 
#par2 {
  background-color:red;
  width:300px;
}

Voir le résultat : RELATIF-1.

Remarque : l'élément sort à moitié du flux, et du coup on peut avoir des effets indésirables, comme par exemple ici la superposition et le dépassement du conteneur. C'est l'occasion de présenter la propriété z-index, qui ne fonctionne que lorsque les éléments sont positionnés et qui permet de gérer la profondeur des blocs ( voir lignes 13 et 20 ) :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

#conteneur {
  background-color:black;
  color:yellow; 
  width:500px;
}
 
#par1 {
  background-color:blue;
  width:250px;
  position:relative;
  top:150px;
  left:200px;
  z-index:1;
}
 
#par2 {
  background-color:red;
  width:300px;
  position:relative;
  z-index:2;
}

Les deux paragraphes sont positionnés ( lignes 10 et 19 ), et le z-index de #par1 est plus petit que celui de #par2, donc il se retrouve en-dessous : RELATIF-2.

ABSOLU :

Le principe est assez proche du positionnement relatif, sauf que l'élément est totalement sorti du flux du document, d'ailleurs le bloc "conteneur" ne s'en occupe plus. La place est fixe dans la fenêtre.  Il faut bien maitriser la place de chaque élément pour pouvoir utiliser cela :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

#conteneur {
  background-color:black;
  color:yellow; 
  width:500px;
}
 
#par1 {
  background-color:blue;
  width:250px;
  position:absolute;
  left:150px;
  bottom:20px;
}
 
#par2 {
  background-color:red;
  width:300px;
}

Voir le résultat : ABSOLU.

FIXE :

Quasi identique à avant, sauf que le bloc garde sa place dans la fenêtre lors du défilement de celle-ci :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

#conteneur {
    background-color:black;
    color:yellow; 
    width:500px;
}
 
#par1 {
    background-color:blue;
    width:250px;
    position:fixed;
    right:150px;
    bottom:20px;
}
 
#par2 {
    background-color:red;
    width:300px;
}

Voir le résultat : FIXE.

FLOTTANT :

Ce principe est le même que celui utilisé pour les lettrines : le bloc est poussé du côté droit ou du côté gauche. Il n'y a donc que deux propriétés possibles : left ou right ( voir ligne 10 ).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

#conteneur {
  background-color:black;
  color:yellow; 
  width:500px;
}
 
#par1 {
  background-color:blue;
  width:250px;
  float:left;
}
 
#par2 {
  background-color:red;
  width:300px;
}

Voir le résultat : FLOTTANT.

Les autres blocs frères prennent le reste de la place autour du bloc flottant.

Que se serait-il passé si on avait mis right à la place de left ?