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 CSS Basics (2014) Enhancing the Design With CSS Media Query Basics

Posted by Karl Pupé
Karl Pupé
6,718 Points

Use of Curly Brackets

I am just going over this lesson again and I just noticed something. Guil uses 3 curly brackets to write the below statement:

@media (max-width: 1024px) {
  .primary-content,
  .secondary-content {
    width: 90%;
  }
  .wildlife {
    padding: 10% 12%;
    margin: 50px 0 20px;
  }
}

I was just wondering out of interest why he couldn't have just used one like below:

@media (max-width: 1024px) {
  .primary-content,
  .secondary-content 
    width: 90%;

  .wildlife 
    padding: 10% 12%;
    margin: 50px 0 20px;

}

Maybe this is a newbie question, but could someone explain why there need to be 3 curly brackets?

I really appreciate your help guys!

4 Answers

Billy Bellchambers
Billy Bellchambers
21,689 Points

I am a bit confused by your question as both code sets look the same.

curly braces are use to follow a select or rule and to contain the rules to be applied to those selected items.

The code above doesnt look right to me anyway as the selectors inside the media query are followed by rules not contained within curly braces.

To me it should look like so.

@media (max-width: 1024px) {
   .primary-content,
   .secondary-content {
     width: 90%;
   }  /* content selector closing brace*/

     .wildlife {
       padding: 10% 12%;
       margin: 50px 0 20px;
     } /* wildlife class closing brace*/

} /* media query closing brace*/
Billy Bellchambers
Billy Bellchambers
21,689 Points

Hope that helps solve your question.

as the selectors nested inside the media query need to follow standard syntax to work too.

Karl Pupé
Karl Pupé
6,718 Points

Sorry about that I realised that I typed it in wrong and I made the changes... Brilliant thank you for your quick response!

Cheers

Billy Bellchambers
Billy Bellchambers
21,689 Points

Makes much more sense now.

Does that answer your question?

Jennifer Nordell
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

I've looked at the video that is linked at the top of this post and can't find the particular media query that you're referencing. However, it shouldn't be three curly braces... it should be four. And that's because each block of css properties and values need their own curly braces after the selector. But all those selectors, properties, and values are going to be INSIDE the media query which has its own set of curly braces. An example:

@media (max-width: 1024) {  //begin media query

     body {  //begin body block
          background-color: white;
          font-size:  16px;
     }  //end body block

     h1 {  //begin h1 block
          font-size: 20px;
          color: tomato;
     }  //end h1 block
} //end media query

Hope that clarifies things!

Karl Pupé
Karl Pupé
6,718 Points

Hi Jennifer!

Another brilliant illustration! Thank you so much - it really makes more sense! Thank you for your help!

jason chan
jason chan
31,009 Points
jason chan
jason chan
31,009 Points

You need the curly braces or interpreter is going to error out unless your planning to use a different syntax you made up.

Karl Pupé
Karl Pupé
6,718 Points
Karl Pupé
Karl Pupé
6,718 Points

Hi Billy!

Thank you - it really helped as it clarified why he had 3 curly brackets! Your comments really highlighted why this is case! Thank you for your help!