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
Unsubscribed User
4,479 PointsWhy are the media queries placed in the css file and not in the head of the HTML?
I think I have seen media queries placed in the head of the HTML page. If this is possible, why are the queries placed in the css file and not in the head of the HTML in this example?
(When the media query is placed in the head of the HTML and the media query condition is met a different linked css file styles the page)
4 Answers
Jovanny Elias
16,204 PointsYou can use css inside your html and it will work just fine. However css was created to give developers/designers a better way to organize, find, change and correct any issues that may come up. If you think about it on a small site it will be very simple to go to your html file and find mistakes of your css but having a separate css file for larger sites will allow you to do two things organize and find everything much easier and two the most important of all you don't have to add the same exact css to every single html page you create. it saves time and best of all when you need to change something like the font size of background color you only have to do it once inside your css file rather than going into each individual html file and changing the font and color on each and every page. It saves you time and the stress of digging around all your html files if you had placed your css inside your html
Unsubscribed User
4,479 PointsYep, I get it. Good point. CSS was designed to remove styling from content.
Just so I have this clearly: I could add a media query in the HTML head like this
<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />
but, if I wanted to change the max-width value, I would have to do this on ALL the HTML pages that contain this query?
Jovanny Elias
16,204 PointsCorrect if you had let's say a site with 10 pages and you had a media query for your footer or header that would be the same for very single page you would have to go into all 10 pages of your html file and change each one individually rather than just one single time if you have it in a separate css file.
The way you have it written down is basically telling your browser to only use that css file if the screen size is less than 600px. It's perfectly fine to do it this way as if you wanted to change the font or color in any browser under 600px you would only need to do so once inside your small.css file. But if you realized or found out that you wanted to use the css file small.css for screen let's say with a max-width of 650px yes you would have to go into all your html files and change 600 to 650.
If you had just linked 1 css file that included all your media queries for a small medium and large screen you would only need to go into that 1 css file and change your max width to 650 once as every single html page would use the same file.
read this article it explains the many different ways you can use media queries and why you may choose one over the other depending on the type of project your are working on.
Hope that clears things up a bit
Unsubscribed User
4,479 PointsThanks also for your info on the benefit when browser caching enabled.
Unsubscribed User
4,479 PointsYes, that definitely clears things up. Thanks for the link to the ways in which media queries can be used!
Jovanny Elias
16,204 PointsJovanny Elias
16,204 PointsAnother great benefit is that your browser will display your page much faster if cache is enabled it will save the css once inside your desktop/laptop/phone and if multiple pages in your site use the same css file your browser will load the page faster as it has already downloaded and saved the file for future use. The same can be said if you came back the next day or two days later to the same site it would load faster as the css will no longer need to be downloaded prior to displaying your page.