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

General Discussion

Posted by Scooter D
Scooter D
9,611 Points

CSS When To Use a Comma?

I am wondering when to use a comma and when not to? Here is my code

body {
font-family: 'Nunito', sans-serif;
color: #FAF3BC;
background: #420600 url(' img/bg-texture.jpg') repeat;

}

In the Font Family there is a comma between the two font names. In the background there isn't a comma between the hex number and url. In the code challenge I got it wrong when I had a comma between the hex number and url.

Is there a golden rule on when to use a comma? Am I over thinking this minute detail?

Thanks!

5 Answers

Chad Shores
PLUS
Chad Shores
Courses Plus Student 8,868 Points
Chad Shores
Chad Shores
Courses Plus Student 8,868 Points

Just practice over and over, soon you wont even think about it.

Randy Hoyt
STAFF
Randy Hoyt
Treehouse Guest Teacher
Randy Hoyt
Randy Hoyt
Treehouse Guest Teacher

You very rarely use commas in CSS! :~) Here's a good general guide: commas are used between values that are the same kind of thing. If the two items are different kinds of things, then you don't.

  • With font-family, a comma separates one font family from another font family.
  • With background, no comma separates the background color from the background position.

Think about it in the abstract like this:

property: value1 [?] value2;

Should you separate these with a comma? Ask yourself this: is "value1" a "property"? is "value2" a different "property"? If they are, then you would use a comma.

Let's try it with your two examples. First:

font-family: 'Nunito' [?] sans-serif;

Is Nunito a font family? Yes. Is sans-serif a different font family you might use instead? Yes. These two values are the same kind of thing. Use a comma.

font-family: 'Nunito' , sans-serif;

Second:

background: #420600 [?] url(' img/bg-texture.jpg') [?] repeat;

Is #420600 a background? Not exactly: it's a background color. Is url(' img/bg-texture.jpg') a background? Not exactly: it's a background image. These two values are different kinds of values. Is repeat a background? Nope, it's an attribute defining how the background should repeat. Since these three values are not the same kind of thing, then you do not use a comma.

background: #420600 url(' img/bg-texture.jpg') repeat;

Does that help?

Chad Shores
PLUS
Chad Shores
Courses Plus Student 8,868 Points
Chad Shores
Chad Shores
Courses Plus Student 8,868 Points

Excellent post^^^

Scooter D
Scooter D
9,611 Points
Scooter D
Scooter D
9,611 Points

Thanks so much for this, great explanation!!

Alexander Sobieski
Alexander Sobieski
6,555 Points
Alexander Sobieski
Alexander Sobieski
6,555 Points

2 Quick things -- 

background: #420600 url(' img/bg-texture.jpg') repeat;

is short-hand for 

background-color: #420600
background-image: url(' img/bg-texture.jpg');
background-repeat: repeat;

Typicaly you'll see most of the multi-value css in shorthand CSS, which expects certain values to be added.

2) the other place (other than fonts) that you may commonly use comas is in the following scenario:

/*Instead of these*/

h1{ margin: 1em .25em 1.5em; color: #ffce32; border-bottom: 1px solid #000; } h2 { margin: 1em .25em 1.5em; color: #ffce32; } h3{ margin: 1em .25em 1.5em; color: #ffce32; } /** etc. **/

You can use:

h1, h2, h3 {
margin: 1em .25em 1.5em;
color: #ffce32;
}
h1 { border-bottom: 1px solid #000; }