link media Attribute - HTML CSS HTML Tag

HTML CSS examples for HTML Tag:link

Description

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.

Syntax

Possible Operators

Value Description
and an AND operator
not a NOT operator
, an OR operator

Devices

Value Description
allDefault. Used for all media type devices
print Used for Print preview mode/printed pages
screen Used for computer screens, tablets, smart-phones etc.
speech Used for screenreaders that "reads" the page

Values

Value DescriptionExample
aspect-ratiowidth/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)"
gridSpecifies 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)"
scanscanning 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):

Demo Code

ResultView the demo in separate window

<!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>

Related Tutorials