< Le langage CSS

Comme vous l'avez appris. Le CSS et le HTML sont complémentaires. Le CSS contient toutes les informations concernants la mise en forme et le document HTML, la donnée. Nous allons voir ici comment faire pour indiquer, dans un document HTML, quel(s) code(s) CSS s'applique(nt). Pour cela, il faudra distinguer les codes s'appliquant :

  • sur plusieurs pages
  • sur une seule page
  • à un seul élément


Intégrer une feuille de style externe

C'est la façon de faire la plus courante : dans l'élément <head> on ajoute un élément <link> :

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

le fichier CSS est un simple fichier texte qui contient le code CSS qui s'appliquera à toute la page. L'utilisation de cette balise permet très facilement d'utiliser une feuille de style pour plusieurs documents HTML.

Intégrer du style directement dans la page

Dans le cas où on voudra que le code CSS ne s'applique qu'à une page : on pourra l'inclure directement dans le code HTML.

<html>
  <head>
    <style type="text/css">
      /* Ici le code CSS */
    </style>
  </head>
  ...
</html>

Intégrer du style directement dans un élément HTML

Lorqu'un style s'applique à un seul élément : plutôt que de lui créer une classe, on peut inclure le code dans l'élément lui-même grâce à l'attribut style.

<elt style="prop1: val1; prop2: val2; prop3: val3">

par exemple : un paragraphe en rouge.

<p style="color: red">
  le corps du paragraphe
</p>

Définir une feuille de style selon le média

CSS permet de différencier la présentation d'un même document (X)HTML en fonction du média visé, par exemple pour l'adapter :

  • à l'écran d'ordinateur de bureau
  • à la projection en grand écran
  • au rendu sur l'écran réduit d'un mobile ou PDA
  • à l'impression papier
  • au rendu sonore via une synthèse vocale

La plupart des propriétés CSS peuvent s'appliquer à tous les médias. Cependant, il existe également des propriétés spécifiques à un ou à certains médias. Par exemple :

  • display permet d'inclure ou d'exclure du rendu un contenu (X)HTML quel que soit le media (y compris donc une lecture par une synthèse vocale).
  • à l'inverse, voice-family permet d'indiquer les familles de voix utilisées par une synthèse vocale lisant le contenu du document, tandis que font-family indique les familles de polices de caractères utilisées pour son affichage à l'écran ou son impression papier.

Chaque feuille de style devrait donc se limiter aux seules propriétés et valeurs adaptées à un ou plusieurs médias, et être accompagnée de la mention du ou des types de média visés. Ceci permettra notamment d'éviter le téléchargement de styles inexploitables ou produisant un résultat inapproprié selon le navigateur et le média concerné.

Le ou les types de médias visés peuvent être indiqués :

  • soit lors de la liaison HTML, grâce à l'attribut media des éléments link et style :
<link rel="stylesheet" href="styles.css" media="screen" />
<style type="text/css" media="screen">
  @import url(styles.css);
</style>
  • soit dans la feuille de style elle-même en précisant le type de média visé par une règle @import, ou en regroupant plusieurs styles dans une règle @media :
@import url(styles.css) screen;

@media screen {
   body {...}
   p {...}
}

Lorsqu'une feuille de style s'applique à une sélection de plusieurs médias, ceux-ci sont alors séparés par une virgule :

<link rel="stylesheet" href="styles.css" media="screen, projection, handheld" />

En l'absence de mention du média, une feuille de style s'applique par défaut à tous les médias. La mention du type de média all a le même effet :

<link rel="stylesheet" href="global.css" />
<link rel="stylesheet" href="global.css" media="all" />

Les principales valeurs de type de média sont, pour celles qui sont actuellement supportées par les navigateurs :

  • all : quel que soit le média de sortie (reconnu par tous les navigateurs Web traditionnels)
  • screen : écrans d'ordinateur de bureau (reconnu par tous les navigateurs Web traditionnels)
  • print : pour l'impression papier (reconnu par tous les navigateurs Web traditionnels)
  • handheld : écrans de très petite taille (mobiles, PDA. Cependant, de nombreux navigateurs pour mobiles reconnaissent également le type de média screen)
  • projection : quand le document est projeté (Opera en mode plein écran)

Deux autres types de médias sont plus rarement reconnus par les logiciels de rendu, et sont encore peu exploités actuellement :

  • tv : quand le document est affiché sur un appareil de type télévision, caractérisé par une résolution moyenne
  • speech : pour le rendu via une synthèse vocale (actuellement disponible dans Opera. Ce type de média n'est en revanche pas pris en compte par les logiciels de lecture d'écran actuels utilisés en particulier par les personnes handicapées visuelles)

Certains type de média restent théoriques, fautes de support par les agents utilisateurs :

  • tty : si le document est consulté par une application en mode texte (utile pour consulter les documentations lors de l'administration d'un serveur)
  • braille : lorsque le document sera rendu sur une tablette braille
  • embossed : pour l'impression braille.

Enfin, l'ancien type de media aural, destiné aux synthèses vocales, a été déprécié et remplacé depuis CSS2.1 par speech.

Les feuilles de styles alternatives

Les feuilles de styles alternatives permettent de proposer un choix de plusieurs rendus différents pour un même document (X)HTML. Ce choix s'apparente à celui d'un thème graphique.

Un lien vers une feuille de style alternative se définit comme le lien vers la feuille de style par défaut. Cependant :

  • l'attribut rel change et devient alternative stylesheet.
  • L'attribut title permet de définir et de différencier chaque présentation alternative. En présence de styles alternatifs, une feuille de style dénuée d'attribut title devient permanente, et s'applique quel que soit le style alternatif choisi.
<link rel="alternative stylesheet" href="une_feuille_alternative.css" title="titre" media="screen" />

Un exemple avec trois feuilles alternatives : une simple, par défaut. Une autre, à dominantes noires. Une dernière, à dominantes bleues. Notez également la première feuille de style, permanente, qui s'appliquera quel que soit le style alternatif choisi :

<link rel="stylesheet" href="common.css" />
<link rel="stylesheet" href="defaut.css" title="Simple, par défaut" media="screen" />
<link rel="alternative stylesheet" href="noir.css" title="Thème à dominantes noires" media="screen" />
<link rel="alternative stylesheet" href="ciel.css" title="Thème bleu" media="screen" />

Cependant, les styles alternatifs ne sont que très partiellement exploités par les navigateurs graphiques actuels.

Un exemple complet

Cet exemple présente une page d'un site de cours. Cette page est la seule du site qui regroupe les définitions. Certaines sont importantes : elles seront mises en valeurs. Une définition est particulière...

Cet exemple a été conçu pour exploiter toutes les notions abordées sur cette page.

<!DOCTYPE html>
<html lang="fr">
  <head>
    <title>Une page</title>
    <!-- une feuille de style correspondant à la charte graphique du site
    Elle est incluse sur toutes les pages pour rendre le site homogène -->
    <link rel="stylesheet" href="site.css" title="Simple, par défaut" media="screen" />
 
    <!-- une feuille de style pour l'impression. elle rend
    le texte noir sur blanc et éliminant les couleurs de fond -->
    <link rel="stylesheet" href="impression.css" media="print" />
 
    <!-- une feuille de style alternative où le texte est blanc sur noir -->
    <link rel="alternative stylesheet" href="negatif.css" title="Noir sur blanc" media="screen" />
 
    <style type="text/css">
      /* Cette page est la seule de site à inclure
      des définitions de la classe importante */
      dt.importante
        {
        color: red;
        text-decoration: underline;
        }
    </style>
  </head>
  <body>
    <h1>Glossaire</h1>
    <p>Cette page est une liste de définitions, dont certaines sont importantes :</p>
    <dl>
      <dt>un terme</dt>
        <dd>une définition</dd>
      <dt>un terme</dt>
        <dd>une définition</dd>
      <dt class="important">un terme important</dt>
        <dd>une définition</dd>
      <dt>un terme</dt>
        <dd>une définition</dd>
      <dt>un terme</dt>
        <dd>une définition</dd>
      <dt class="important">un terme important</dt>
        <dd>une définition</dd>
      <dt>un terme</dt>
        <dd>une définition</dd>
      <dt>un terme</dt>
        <dd>une définition</dd>
      <dt>un terme</dt>
        <dd>une définition</dd>
 
      <!-- ici, une définition particulière. c'est la seule donc il
      n'est pas nécessaire de créer une classe supplémentaire -->
      <dt style="color: blue">un terme particulier</dt>
        <dd>une définition</dd>
 
      <dt>un terme</dt>
        <dd>une définition</dd>
    </dl>
  </body>
</html>

Voir aussi

Le chapitre Zones de mise en forme du wikilivre Programmation HTML.

Cet article est issu de Wikibooks. Le texte est sous licence Creative Commons - Attribution - Partage dans les Mêmes. Des conditions supplémentaires peuvent s'appliquer aux fichiers multimédias.