Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS Framework Basics Prototyping with Foundation Building a Headline Panel, with Stylish Buttons

Posted by Jay Valentine
Jay Valentine
Courses Plus Student 4,389 Points

What does media="screen" mean?

What does media=screen mean in the context of this below

  <link href="css/normalize.css" rel="stylesheet" media="screen">
    <link href="css/foundation.css" rel="stylesheet" media="screen">
    <link href="css/my-styles.css" rel="stylesheet" media="screen">

2 Answers

Ryan Ruscett
Ryan Ruscett
23,309 Points
Ryan Ruscett
Ryan Ruscett
23,309 Points

"Screen" is a media type. There used to be a lot of them but they are all mostly deprecated now. There is Screen, Speech and Print. Screen just means it's to display on a tablet, computer or phone. Where as Speech is for a reader that reads out loud and print is for printers. So it's basically saying it's going to display the feature on a computer, tablet or phone.

hope that helps.

Jay Valentine
Jay Valentine
Courses Plus Student 4,389 Points

So you would make a seperate style sheet for example

<link href="css/printversion.css" rel="stylesheet" media="print">

Then that stylesheet creates the styles for a printed version of the site? am i correct

Ted Sumner
Ted Sumner
Courses Plus Student 17,967 Points

Yes, if you wanted a change in look when printed. I have not tried it to see how it works in practice, though.

Ted Sumner
PLUS
Ted Sumner
Courses Plus Student 17,967 Points
Ted Sumner
Ted Sumner
Courses Plus Student 17,967 Points

The media type is what the element is optimized for. There are a variety of values. Here is documentation. http://www.w3schools.com/css/css_mediatypes.asp

They example they use is for a display font being different than a print font if you print the page.