style media attribute
The media attribute on the style element:
- allows you to specify in which media the internal style sheet will apply ⁄display
- media is a specific attribute → can be applied ONLY on the next HTML5 elements: link, source, style
The values of the media attribute (the media they represent):
- - all (apply to all media: screen, print..)
- screen (computer screens)
- print (computer screens but in print preview mode and while printing)
- braille (braille tactile feedback devices)
- embossed (paged braille printers)
- handheld (old small screen devices; does not apply to smartphones)
- projection (projectors)
- speech (speech synthesizer)
- tty ( teletypes, terminals)
- tv (television-type devices)
Examples
| <style | attribute | = | "value(s)" | > | ... | <⁄style> | example |
|---|---|---|---|---|---|---|---|
| 1. | media | = | all, braille, embossed, handheld print, projection, screen, speech tty, tv | < media="screen"> CSS rules <⁄> |
Video demonstration style media attribute
HTML5 style media attribute Tutorial
| min | video details |
|---|---|
| 00:08 | video tutorial: style element, media attribute objective: to specify in which media the style sheet applies |
| 00:15 | if media attribute is absent, the default value is: all (all media) → the style applies in all media (screen, print, projection...) |
| 00:21 | in media screen (computer screen) the style applies → test OK |
| 00:25 | in media print (print preview & while printing) the style applies → test OK |
| 00:32 | adding media attribute to style element, value: screen → the style applies ONLY to screen media |
| 00:41 | in media screen (computer screen) the style applies → test OK |
| 00:46 | in media print (print preview & while printing) the style does not apply → test OK |
| 00:53 | changing the value to: print → the style applies ONLY to print media |
| 00:57 | in media screen (computer screen) the style does not apply → test OK |
| 01:01 | in media print (print preview & while printing) the style applies → test OK |
| 01:04 | you can add multiple style elements on page and specify different media for each |