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 trialScooter D
9,611 PointsCSS 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
Courses Plus Student 8,868 PointsJust practice over and over, soon you wont even think about it.
Randy Hoyt
Treehouse Guest TeacherYou 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
Courses Plus Student 8,868 PointsExcellent post^^^
Scooter D
9,611 PointsThanks so much for this, great explanation!!
Alexander Sobieski
6,555 Points2 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; }