Le langage CSS/Interface HTML
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 :
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 codice_1 par un élément codice_2 :
<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 codice_3.
<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 codice_4.
 <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 codice_4 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 :
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 :
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 :
<link rel="stylesheet" href="styles.css" media="screen" />
<syntaxhighlight>
<syntaxhighlight lang="html">
<style type="text/css" media="screen">
@import url(styles.css);
</style>
@import url(styles.css) screen;
@media screen {
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 codice_14 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 :
Deux autres types de médias sont plus rarement reconnus par les logiciels de rendu, et sont encore peu exploités actuellement :
Certains type de média restent théoriques, fautes de support par les agents utilisateurs :
Enfin, l'ancien type de media codice_26, destiné aux synthèses vocales, a été déprécié et remplacé depuis CSS2.1 par codice_22.
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 :
<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".

Enseignement du russe/Nombres
Mécanique, enseignée via l'Histoire des Sciences/Devoir surveillé 1