HTML CSS examples for HTML Tag:link
The media attribute specifies what media/device the target resource is optimized for.
This attribute is mostly used with CSS stylesheets to specify different styles for different media types.
The media attribute can accept several values.
| Value | Description |
|---|---|
| and | an AND operator |
| not | a NOT operator |
| , | an OR operator |
| Value | Description |
|---|---|
| all | Default. Used for all media type devices |
| Used for Print preview mode/printed pages | |
| screen | Used for computer screens, tablets, smart-phones etc. |
| speech | Used for screenreaders that "reads" the page |
| Value | Description | Example |
|---|---|---|
| aspect-ratio | width/height ratio. "min-" and "max-" prefixes can be used. | media="screen and (max-aspect-ratio:16/9)" |
| color | bits per color. "min-" and "max-" prefixes can be used. | media="screen and (min-color:3)" |
| color-index | number of colors the target display can handle. "min-" and "max-" prefixes can be used. | media="screen and (min-color-index:256)" |
| grid | Specifies if the output device is grid or bitmap. Possible values are "1" for grid, and "0" otherwise. | media="handheld and (grid:1)" |
| height | height of the?area. "min-" and "max-" prefixes can be used. | media="screen and (max-height:700px)" |
| monochrome | bits per pixel in a monochrome frame buffer. "min-" and "max-" prefixes can be used. | media="screen and (min-monochrome:2)" |
| orientation | orientation of the target display/paper. Possible values: "portrait" or "landscape" | media="all and (orientation: landscape)" |
| resolution | pixel density (dpi or dpcm) of the target display/paper. "min-" and "max-" prefixes can be used. | media="print and (min-resolution:300dpi)" |
| scan | scanning method of a tv display. Possible values are "progressive" and "interlace". | media="tv and (scan:interlace)" |
| width | width of the targeted area. "min-" and "max-" prefixes can be used. | media="screen and (min-width:500px)" |
The following code shows how to use Two different style sheets for two different media types (screen and print):
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="demo_screen.css"> <link rel="stylesheet" type="text/css" href="demo_print.css" media="print"> </head><!--from w w w .ja va 2s . c om--> <body> <h1>java2s.com Example</h1> </body> </html>