L’une des caractéristiques les plus importantes des feuilles de style est qu’elles peuvent être utilisées sur une variété de supports, tels que des pages, des écrans, des synthétiseurs électroniques, etc. Certaines propriétés ne peuvent fonctionner que sur des supports spécifiques. Par exemple, la propriété "font-size" n'est valable que sur les types de supports défilants (écran).
La déclaration d'un attribut media peut être introduite en utilisant @import ou @media :
Voici une citation :
@import url(loudvoice.css) discours ;
@media imprimer {
/* la feuille de style pour l'impression va ici */
}
Les médias peuvent également être introduits dans le balisage du document :
Voici une citation :
<link rel="stylesheet" type="text/css" media="print" href="foo.css">
On peut voir que la différence entre @import et @media est que le premier introduit des feuilles de style externes pour les types de médias, tandis que le second introduit directement les attributs des médias. La méthode d'utilisation de @import consiste à ajouter l'adresse URL du fichier de feuille de style à @import, puis à ajouter le type de média. Plusieurs médias peuvent partager une feuille de style, et les types de média sont séparés par des séparateurs ",". L'utilisation de @media consiste à donner la priorité au type de média, et les autres règles sont fondamentalement les mêmes que l'ensemble de règles. Les différents types de médias sont répertoriés ci-dessous :
ÉCRAN : fait référence à l'écran de l'ordinateur.
IMPRIMER : Désigne les supports opaques utilisés avec les imprimantes.
PROJECTION : désigne le projet utilisé pour l'affichage.
BRAILLE : système braille, désigne les imprimés à effet tactile.
AURAL : désigne un synthétiseur vocal électronique.
TV : Désigne les médias de type télévision.
HANDHELD : désigne un dispositif d'affichage portable (petit écran, monochrome)
TOUS : Convient à tous les supports.