Utilisation des CSS pour la présentation Web

Les CSS (Cascading Style Sheets, feuilles de styles en cascade) vont simplifier la création de vos pages, au prix d'un petit apprentissage initial. Il s'agit d'un fichier que l'on inclut dans chaque page web et qui contient les attributs de position et de style pour le contenu.
Le format CSS existe de depuis 1994 mais s'est généralisé en 2000 avec un support complet dans Internet Explorer 5.
Il est possible d'associer une feuille de style à un document XML. Dans ce cas les propriétés sont attribuées aux éléments (balises) du document.

Pourquoi les feuilles de style?

L'intérêt le plus commun est la création de plusieurs colonnes de texte, selon la présentation des journaux.
Les CSS ont les avantages suivants:

Les bases

Les feuilles de styles servent principalement:

Noter que l'on ne peut pas mettre de textes dans le fichier de feuille de style, mais il vaut mieux de toute façon qu'ils soient dans la page pour être pris en compte par les moteurs de recherche.

Elements et propriétés

Les CSS se réduisent à deux choses: les éléments, et leurs propriétés. Les éléments sont les balises Html ou une classe définie dans la feuille de style.

Pour fractionner et positionner les parties de la page, on utilise une balise nommée "div".

Le format général de déclaration de style est le suivant:

nom 
 {
    ...liste de propriétés...
 }
Le nom peut avoir trois formes, comme détaillé ci-dessous.
Les propriétés ont la forme: 
 attribut : valeur ;
Certains attributs comme "border" par exemple, peuvent comporter une liste de valeurs séparées par un espace (non pas par une virgule).

Les déclarations CSS

Il y a trois types de déclarations dans un fichier CSS:

Les identificateurs et classes nécessitent un attribut dans le code HTML. Cela aura la forme suivante, avec la balise div par exemple:

Insérer une feuille de style

On place dans la section <head> la ligne suivante:

<link type="text/css" href="mafeuille.css" rel="stylesheet">

- le type désigne le type d'affichage.
- href a pour valeur le fichier contenant les définitions de style.
- rel="stylesheet" précise le type de lien.

Le positionnement

Les parties de la page sont découpées avec une balise div à laquelle on associe un identificateur. Exemples:

  <div id="logo"> </div>
  <div id="menu"> </div>
  <div id="contenu"> </div>
Ces éléments sont repris dans la feuille de style avec le format suivant: 
#logo  { }         
#menu
{  
    top: 60px; 
}
#contenu
{ 
    left: 120px;
}

Il suffit ensuite de définir les attributs de positions.
Le menu aura l'attribut: top: 60px; pour être placé 60 pixels sous la partie logo.
Le contenu aura l'attribut: left: 120px; pour ménager 120 pixel à gauche pour le menu.

Une règle: propriétés en cascades

Ne perdez pas de vue que les CSS sont hiérarchiques: toutes les propriétés que vous définissez sont relatives à l'élément dans lequel vous vous trouvez. Par exemple, une police réduite à 80% à l'intérieur d'un élement dans lequel la police est augmentée à 120 % revient à une police de taille standard.

D'ailleurs, il est possible de cibler précisément un élément à l'intérieur d'un autre élement avec la syntaxe suivante:

#selecteur selecteurinterne
{
     ...attributs...
}

Exemple:

#table a
{
    color:green;
}

Les liens seront verts, mais dans les tableaux seulement. Pour avoir le détails des propriétés CSS, consultez les références ci-dessous.

Ressources et tutoriels

Quelques tutoriels et références pour apprendre à utiliser les CSS avec exemples et outils.