Uma das características mais importantes das folhas de estilo é que elas podem ser usadas em diversas mídias, como páginas, telas, sintetizadores eletrônicos, etc. Certas propriedades só podem funcionar em mídias específicas. Por exemplo, a propriedade "tamanho da fonte" só é válida em tipos de mídia roláveis (tela).
A declaração de um atributo media pode ser introduzida usando @import ou @media:
Aqui está uma citação:
@importar url(loudvoice.css) fala;
@impressão de mídia {
/* folha de estilo para impressão vai aqui */
}
A mídia também pode ser introduzida na marcação do documento:
Aqui está uma citação:
<link rel="stylesheet" type="text/css" media="print" href="foo.css">
Pode-se observar que a diferença entre @import e @media é que o primeiro introduz folhas de estilo externas para tipos de mídia, enquanto o último introduz atributos de mídia diretamente. O método de usar @import é adicionar o endereço URL do arquivo da folha de estilo a @import e, em seguida, adicionar o tipo de mídia. Várias mídias podem compartilhar uma folha de estilos e os tipos de mídia são separados por "," separadores. O uso de @media é colocar o tipo de mídia em primeiro lugar, e outras regras são basicamente iguais ao conjunto de regras. Os vários tipos de mídia estão listados abaixo:
TELA: Refere-se à tela do computador.
IMPRIMIR: Refere-se à mídia opaca usada em impressoras.
PROJEÇÃO: refere-se ao projeto utilizado para exibição.
BRAILLE: Sistema Braille, refere-se a material impresso com efeito tátil.
AURAL: refere-se a um sintetizador de voz eletrônico.
TV: Refere-se à mídia do tipo televisão.
HANDHELD: refere-se a um dispositivo de exibição portátil (tela pequena, monocromático)
TODOS: Adequado para todas as mídias.