Hi all,
I'm sure some of you have seen the following:
<link rel="stylesheet" src="styles.css" media="screen,projection" />
<link rel="stylesheet" src="styles.css" media="print" />
Or whatever else...
But what does the media attribute actually do? I've created several websites and I have never used the media attributes when linking stylesheets. Is that a mistake?
Thanks, Amit
w3 can explain it best.
The media types are about what media is to be used to view the page.
If someone is printing the page, the print media CSS is used. This is useful in many cases - if your site is white text on black background, the print CSS can be the opposite so ink is not wasted.
Screen is what you would normally think about - the computer screen, how most people will see the site.
Projection - if you want to have a larger font when projecting the website.
It defines the media-type of the stylesheet. Or the application of a given stylesheet, if you will.
If you include a stylesheet with the media property to "print"; the rules in that stylesheet will only affect a page when it gets printed out. If you set the media property to "screen"; the rules in the stylesheet won't affect the print-out of the page, but will affect the page when viewed in a browser.
If you define the media property as being "screen, print"; rules in the stylesheet will affect both the print-out of the page and how it looks in a browser.
Here's a link to the documentation at W3C (the organization which defines the standards for CSS).
These are media types, which allow you to target a style sheet to a specific medium.
See http://www.w3.org/TR/CSS21/media.html. This functionality has been extended with media queries: http://www.w3.org/TR/css3-mediaqueries/.