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

HTML How to Make a Website Beginning HTML and CSS Add Style to the Page

Is it really necessary to leave a completely blank line between the CSS curly open and closing bracket?

Is it really necessary to leave a completely blank line between the CSS curly open and closing bracket? Or it's ok to actually to write the property and value on the same line within the open and closing bracket.

Hey Szu,

Writing everything on the same line within the brackets will work, but it doesn't make for a very readable file. Creating that space is just good practice and will save you a lot of time down the road if you go back to make changes.

Hope that helps!

3 Answers

Shawn Boyd
Shawn Boyd
14,345 Points

Functionally, you can absolutely write the whole thing on a single line. Separating them out is a stylistic choice and best practice for ease of reading, more so when multiple properties are being set.

#wrapper { background: blue;}

is going to do exactly the same things as

#wrapper {
  background: blue;
}
Kevin Korte
Kevin Korte
28,148 Points

Sure, the browser doesn't care. All of these are valid

.box { background: green; }
.box {
  background: green;
}
.box{background:green;padding:10px;margin:7px;border:4px solid black;border-raidus:2px;}
.box {
  background: green;
  padding: 10px;
  margin: 7px;
  border: 4px solid black;
  border-radius: 2px;
}

It all just comes to what's readable to you, and whatever CSS style guide you might be working from, which would be common on projects with multiple coders.

Typically, if it's a rule with only one attribute, it's put on one line, any more than one, each attribute goes on it's own line for readability sake.

What would be more common, is to see the human readable version where each property has it's own line, and than let a css parser minify the code so it removes whitespace and linebreaks. You'll learn about this later, don't worry about it today. Just know there are solutions for this.

Wow I didn't actually expect the question answered this soon. It's really helpful and thank you a lot. It's such a nice thing to have someone there for you in the online learning process.