Le langage CSS/Interface HTML

Notions de design

Sommaire

Le langage CSS

Introduction
- Premier exemple
- Structure et syntaxe
- Les sélecteurs
- Valeurs et unités utilisées
Mise en forme
Mise en page
Pour aller plus loin
Annexes

Version imprimable

[ Modifier le sommaire ]

Notions de design

Sommaire

Comme vous l'avez appris, le CSS et le HTML sont complémentaires. Le CSS contient toutes les informations concernant la mise en forme, tandis que le document HTML définit le contenu. Nous allons voir ici comment faire pour indiquer, dans un document HTML, quels styles CSS appliquer. Pour cela, il faut distinguer les styles s'appliquant :

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

Intégrer une feuille de style externe

La méthode la plus courante est de définir les styles dans un fichier séparé. Cela permet la réutilisation des styles sur plusieurs pages, et de séparer la mise en forme du contenu.

La feuille de style externe est référencée dans l'élément <head> par 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 les styles CSS qui s'appliquent à 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 veut que le code CSS ne s'applique qu'à une page, on pourra l'inclure directement dans la page HTML, dans un élément <style>.

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

Cependant, si les styles de la page pourront s'appliquer à d'autres pages dans une version ultérieure, il est préférable d'utiliser un fichier séparé par anticipation des évolutions futures.

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

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

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

Exemple : un paragraphe en rouge.

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

Cependant, si le style est volumineux, ou sera réutilisé, il est alors préférable de définir une classe CSS pour les règles de mises en formes. On peut toutefois conserver l'attribut style pour les faibles variations par rapport au style de la classe utilisée.

Exemple :

<p class"menu-item">Item de menu normal.</p>
<p class"menu-item">Autre item de menu normal.</p>
<p class"menu-item" style="color: red;">Item de menu, mais en rouge.</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 utilisé pour la visualisation de la page, 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" />
<syntaxhighlight>

<syntaxhighlight lang="html">
<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.