# Le langage CSS/Interface HTML

* Introduction
** Premier exemple
** Structure et syntaxe
** Les sélecteurs
** Valeurs et unités utilisées
* Mise en forme
** Texte
** Fonds, bordures, marges et espacements
** Listes
** Tableaux
** Héritage
* Mise en page
** Le positionnement des éléments
** Le modèle de boîte
** Transformation géométrique
* Pour aller plus loin
** Techniques avancées
** Navigateurs et débogage
** CSS 3
** Bootstrap
* Annexes
** Glossaire
** Mots réservés
** Notions de design et de colorimétrie
** Interface HTML
* Introduction
** Premier exemple
** Structure et syntaxe
** Les sélecteurs
** Valeurs et unités utilisées
* Mise en forme
** Texte
** Fonds, bordures, marges et espacements
** Listes
** Tableaux
** Héritage
* Mise en page
** Le positionnement des éléments
** Le modèle de boîte
** Transformation géométrique
* Pour aller plus loin
** Techniques avancées
** Navigateurs et débogage
** CSS 3
** Bootstrap
* Annexes
** Glossaire
** Mots réservés
** Notions de design et de colorimétrie
** Interface HTML
[ Modifier le 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> :
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>.
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.
Exemple : un paragraphe en rouge.
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 :

## 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 :
* 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 :
Lorsqu'une feuille de style s'applique à une sélection de plusieurs médias, ceux-ci sont alors séparés par une virgule :
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 :
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.
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 :
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.

## Voir aussi

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