htmlcssmedia-queries

What does the media="" attribute in the stylesheet HTML definition refer to?


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?


Solution

  • 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.