• Article
  • Discussion
  • Modifier
  • Historique

Appliquer les styles CSS

Un article de Eric Bruyndonckx.

Comment appliquer un style CSS (Cascading Style Sheet) au document HTML qui en dépend ? Il existe 3 méthodes 3 méthodes mais nous utiliserons celle de la feuille de style.

Sommaire

[modifier] Insérer des styles dans l'entête du document

On peut placer des styles CSS dans l'entête du document (<head> et </head>) entre les balises <style> et </style>. Ces styles seront appliqués à tout le document.

Exemple : 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
     "http://www.w3.org/TR/html4/loose.dtd"> 
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; 
   charset=iso-8859-1">
  <title>Titre du document</title>
  <style type="text/css">
    h1 { color: red; }
  </style>
 </head>
 <body>
   ... contenu visible du fichier ...
 </body>
</html>


Cette technique, qui sépare le contenu du document et sa mise en forme, portera sur tous les titres <h1></h1> du document. Malheureusement, ce style n'est utilisable que pour ce document. Pour que toutes les autres pages puissent utiliser ce style, nous les placerons dans une feuille séparée que nous appellerons dans chaque entête de document souhaité.

[modifier] Lier des styles à partir d'une feuille séparée

Il s'agit de créer 2 types de fichiers distincts :

  1. Les documents HTML ;
  2. Les feuilles de styles CSS ;

Ces dernières contiendront toutes les règles nécessaires à la mise en page et au design des fichiers HTML. Il suffira de modifier le fichier CSS séparé pour changer l'allure de toutes les pages HTML du site.

Le fichier CSS portera l'extension .css et ne contiendra que des règles CSS (pas de HTML). Il restera plus qu'à lier ce fichier aux documents voulus.

[modifier] La balise <link>

Pour lier cette fuille de styles à toutes les pages HTML du site, il est d'usage d'utiliser une balise <link> dans l'entête du document (<head> et </head>).

Exemple du document HTML : titresRouges.html 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
     "http://www.w3.org/TR/html4/loose.dtd"> 
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; 
   charset=iso-8859-1">
  <title>Titre du document</title>
  <link rel=stylessheet" type="text/css" href="styles.css">
 </head>
 <body>
  <h1>Titre rouge</h1>
 </body>
</html>

Exemple du document CSS : styles.css 

/* CSS Document */

 h1 { color: red; }

[modifier] Incorporer des styles dans la balise

Cette dernière méthode consiste à écrire directement les styles CSS dans le code HTML, grâce à la proriété HTML style

Exemple : 

<h1 style="color: red;">Titre rouge</h1>

Les inconvénients sont à remarquer !

[modifier] Les sélecteurs de styles

L'exemple ci-dessus utilise comme sélecteurs la balise <h1>. Ses règles affecteront toutes ces balises dans les pages HTML concernées. Cet effet, n'est pas toujours désirable : on souhaite parfois intervenir que sur certaines balises d'un type donné. Par exemple, colorer en bleu certains titres mais pas tous.

Pour cela, le langage CSS accepte différentes formes de sélecteurs :

  1. les sélecteurs de balises (utilisés jusqu'ici)
  2. les sélecteurs de classes (ensemble d'éléments)
  3. les sélecteurs d'identifiants (ou id est les nom donné à un élément unique)

[modifier] Les balises

Toute balise HTML (h1, h2, h3, h4, h5, h6, hr, p, a, img, table, tr, td, etc...). On pourra ainsi supprimer tous les interlignes entre prargraphes en attribuant à la balise <p> des marges hautes et basses nulles.


Exemple : 

p { 
 margin-top: 0;
 margin-bottom: 0; 
}

[modifier] Les classes

Une classe est un nom que l'on chosit librement et que l'on donne au élément concernés. Un sélecteur de classe reprend son nom en le préfixant d'un point (.).

Exemple : 

.nomClasse {   }

Pour attribuer un comportemet différent à certains éléments, il suffit de leur appliquer une classe. On affichera en rouge les liens hypertextes du documents à l'exception de certains liens particuliers que l'on souhaite voir apparaître en vert.

La première règle précise le comportement à adopter pour toutes les balises <a> : 

/* Balises */
a { color: red; }

Appelons .sommaire la classe des liens spécifiques. Ceci permet d'écrire une règle qui leur est propre : 

/* Classes */
.sommaire { color: green; }

Dans le document HTML, les liens seront alors identifiés comme ci-dessous : 

<a href="#">lien normal</a>

Apparaîtra en rouge comme identifié dans la première règle. 

<a href="#" class="sommaire">lien vert</a>

Apparaître en vert, ainsi que tous les liens de la classe sommaire, ar l'application de cette règle spécifique, qui domine le sélecteur général.

Vous pouvez utiliser cette classe dans n'importe quel autre élément, <p> par exemple.

[modifier] Les identificateurs

Un identificateur est lui aussi un nom choisit librement. Il se distingue de la classe en ce qu'il ne peut porter qu'au plus sur un seul élément de votre document HTML.

Les sélecteur CSS s'y référent par l'emploi d'un caractère dièse (#) suivi de son nom (#id). 

/* Identificateurs */
#entete { color: white; }

[modifier] Voir aussi

Récupérée de « http://www.ebx.ch/mediawiki1/index.php/Appliquer_les_styles_CSS »