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
sworup budhathoki
Courses Plus Student 3,965 Points@media
I am confused in @media can I write all my CSS inside it or I should select CSS class and write
2 Answers
tobiastrinkler
Full Stack JavaScript Techdegree Student 16,538 PointsHey Sworup, media queries are usually placed at the end of every css file to override all other rules.
Unless it is for something specific you would never place it at the top.
tobiastrinkler
Full Stack JavaScript Techdegree Student 16,538 PointsHi Sworup,
Not quite sure if I fully understand your question but I will give it a try :).
First of all you always want to add your code for your media query at the end of the CSS file. You start with they keyword @media and add parentheses (). Between the parentheses you will specify when the CSS rules that you write in your media query will be applied to the style of your document. In the example below that I set it to (max-width: 600px) which means when the browser window is smaller than 600px it will apply the styles that you wrote in your CSS. in this case it will style the body element and change the background-color to lightblue.
Furthermore, you can target every element withing your media query. For example # to target ID or . to target a class etc..
@media (max-width: 600px) {
body {
background-color: lightblue;
}
sworup budhathoki
Courses Plus Student 3,965 Pointscan I add media query at first of my CSS file after box sizing