skip to: contenu de la page | liens sur cette page | site navigation | footer (site information)

Site personnel

RATP | MÉTÉO | ASTRO & MUSIC

 


FORMATEUR - WEBMESTRE - Tél : 06 25 27 61 68 


7 rue André Bernard - 93110 Rosny sous Bois 

eric-bourgeois.com www



Appliquer les styles CSS

Comment appliquer ce style CSS au document HTML qui en dépend ?

Il existe pour cela trois méthodes, mais nous utiliserons de préférence celle de la feuille de styles, qui présente de nombreux avantages.

1) Insérer des styles dans l'en-tête du document

On peut d'abord placer les styles CSS dans l'en-tête HTML (contenu de l'élément <head>).
Placé entre les balises <style> et </style>, ce code s'appliquera à tout le document :

<style type="text/css">
h1 {color: blue;}
</style>

Cette technique, qui sépare correctement contenu et mise en forme, portera automatiquement sur tous les titres <h1> du document – contrairement à la méthode d'incrustation, dont l'action est confinée au niveau local.

Malheureusement, la portée de ce style se limite au document HTML du fichier.

Dans l'idéal, le design général du site s'appliquera automatiquement, sans devoir être explicité dans chaque document HTML. Pour aboutir à cet effet, nous placerons les règles CSS dans un fichier distinct.

2) Lier les styles à partir d'une feuille séparée

Il s'agit de stocker les ressources dans des fichiers distincts :
documents HTML et feuilles de styles CSS.

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

Ce fichier CSS, appelé feuille de styles, portera l'extension .css et ne contiendra que des règles CSS (aucun code HTML n'y sera autorisé, pas même la balise <style> vue dans la méthode précédente).

Il convient ensuite de relier ce fichier aux contenus (pages HTML) sur lesquels il est censé porter.


     2 - a) Liaison par la balise <link>

Pour lier cette feuille de styles à toutes les pages HTML du site, il est d'usage de placer une balise <link> dans l'en-tête (contenu de l'élément <head>) de ces dernières.

Colorons les titres <h1> en bleu à l'aide d'une feuille de style séparée.
Le document (X)HTML aura l'allure suivante :

  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-Strict.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
    <head>
    <title>Titre pour le document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />

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

    </head>
    <body>
    <h1>Titre principal de la page</h1>
    </body>
    </html>
C'est l'occasion de prendre connaissance de la structure d'une page écrite en doctype XHTML (la balise <html> contenant la référence à l'espace de noms et au langage utilisé).

Détail des en-têtes – H.T.M.L et de leurs contenus :

  1. DOCTYPE ...
  2. <html> Commandes de début et de fin du document HTML </html>
  3. <head> Informations non affichées concernant le document </head>
    Balises enfants de <head> :
    • <title> Titre du document </title>
      Cette information apparait dans la barre de titre du navigateur.
    • <meta ...>
      Situées dans l'en-tête de votre page HTML, ces commandes guident les moteurs de recherche pour indexer votre page HTML
    • <link> qui n'est pas uniquement dévolue aux feuilles de styles.
  4. <body> Corps du document </body>
    Toutes les informations affichées par le navigateur y sont contenues.
lien Cours HTML - En-Tetes de l'Universite Nice Sophia-Antipolis
La feuille de styles CSS styles.css aura alors pour contenu :

h1 {
color: blue;
}


     2 - b) Utiliser la règle @import

Cette règle permet elle aussi de lier une feuille de style externe à son document HTML.

Ce n'est pas une balise HTML mais une règle CSS 2. Il est donc nécessaire de la déclarer dans l'élément <style> de l'en-tête de votre page HTML :

<style type="text/css">
   @import url(style.css);
</style>

Les feuilles de style, ne représentent rien de complexe, ni dans leur structure ni dans leur utilisation. Ce ne sont jamais que des règles comportant des déclarations.

Connaître les différentes propriétés CSS permet de gérer rapidement toutes les pages d'un site web. Si vous voulez par exemple centrer les titres principaux au milieu de l'écran, précisez simplement la déclaration suivante dans le style déjà vu plus haut :

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

suite dans sélecteurs

Méthode link ou @import ?

<link> est une balise HTML qui n'est pas uniquement dévolue aux feuilles de style. Quand elle désigne une feuille de styles CSS, elle s'accompagne des propriétés et valeurs suivantes :

rel="stylesheet" type="text/css" et media=" [type de média souhaité : screen, projection, print...]"

La règle @import, propriété CSS 2, sera suivie de l'URL d'un fichier contenant les styles à appliquer en plus de la feuille de style en cours.

Le résultat est en pratique identique, à une petite subtilité près. En effet, cette règle n'est pas reconnue par les très anciens navigateurs, pas aux normes CSS – c'est par exemple le cas de Netscape 4.
Appliquer une feuille de style par appel à @import la fera donc appliquer partout sauf sur les anciens navigateurs, ce qui permettra à leurs utilisateurs de consulter le site web concerné sans trop de problèmes.
Un site dépourvu de feuille de style est toujours plus lisible qu'un site dont les styles sont mal interprétés.

En résumé : avec @import un Netscape 4 recevra une page brute, sans style, plutôt qu'une horreur probablement illisible. C'est donc une technique recommandée pour l'interopérabilité (compatibilité) avec les anciens navigateurs.


3) Incorporer les styles dans la balise

Cette dernière méthode consiste à écrire directement les styles CSS dans le code HTML, grâce à la propriété HTML style. Voici un exemple :

<h1 style="color:blue ">titre de la page</h1>

On réservera cette technique aux essai ponctuels temporaires et aux cas de force majeure. Elle cumule en effet tous les inconvénients normalement évités par les CSS :

  • Ce style ne s'appliquera qu'à cette balise précise. Il faudrait répéter ce code sur chacune des balises <h1> du document pour qu'elles soient toutes affectées.
  • Ce style, directement inscrit dans la partie HTML du document, mêle à nouveau le contenu et sa mise en forme. Le recours systématique à cette méthode rendrait une modification globale du site web extrêmement fastidieuse.

Note : on observe des instructions CSS introduites directement, sans sélecteur. Cela signifie que le style est déjà lié à un élément HTML spécifié.

Haut de page

Introduction Html


Le fond et la forme


Introduction Css

Ouvrages de références

Auto-entrepreneur.
Access®, Excel®, Powerpoint®, Word® & Windows® sont des produits et marques déposés
propriété de Microsoft, Inc.
Photoshop® & Dreamweaver ® sont des produits et marques déposés propriété de Adobe System.
 
Dernière mise à jour le 06.11.2011