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) Understanding Values and Units Text Styles

Kenneth Simpson
Kenneth Simpson
1,162 Points
Posted by Kenneth Simpson
Kenneth Simpson
1,162 Points

Help with .primary-content, .secondary-content

I see that the syntax written is

.primary-content, .secondary-content, {

}

but what I do not understand is that in the index.html finale the actual class name is #primary-content t-border and

secondary-content t-border? Why is the t-border part of the class not included when writing it in CSS? Can you just leave some of the wording out when selecting classes is CSS? Thanks.

huckleberry
huckleberry
14,636 Points
huckleberry
huckleberry
14,636 Points

couple of things here bro,

classes use a . and id's use a # so be careful with that.

What you're describing in the element that's listed as secondary-content t-border is actually 2 classes.

<div class="main-article wrapper">
    <p class="first-paragraph article-paragraph">
    some words here
    </p>
</div>

So in this example, my div has the class main-article and the class wrapper.

The paragraph elements have a class of first-paragraph and the class article-paragraph.

Remember that class or ID names cannot have spaces in them so when you see a space within the double quotes of a class attribute... i.e. the class=" " thing, Then that will tell you there's more than one class.

The CSS: You can assign as many classes to an element as you like. In this instance the element has a class of secondary-content AND t-border. In the CSS, that selector is ONLY selecting the secondary-content class name and not selecting the t-border class name.

also, don't include a comma at the end of a selector group. So it would be 

primary-content, 
secondary-content {
     properties: values;
}

not 

primary-content,
secondary-content, {
    properties: values;
}

the comma after secondary-content will cause the CSS to not be applied so always leave off the comma after the final selector in a selector group.

2 Answers

Kenneth Simpson
Kenneth Simpson
1,162 Points
Kenneth Simpson
Kenneth Simpson
1,162 Points

Thank you for the clarification on the multiple classes when there is a space. I guess I am just confused as to the point of having 2 classes for the same element? If I were to put .primary-content { color: yellow; }

and then put

.t-border { color: blue; }

would that not mess stuff up? I guess I do not understand what the second class is actually referring to? I may have zoned out during a video or something but I do not remember being taught that. Do you know of the specific video that covers that? Thanks.

huckleberry
huckleberry
14,636 Points
huckleberry
huckleberry
14,636 Points

I haven't gone through the new CSS course so I don't know the end result but the point of being able to have more than one class within one element is so that you can apply more than one type of styling to a specific element without having to create a whole new class.

Think about it, simple example ahead...

Say you have paragraphs that you want to have blue text. There are other paragraphs that you want to have bigger font size... so you make the classes 

.text-blue {
     color: blue;
}

.text-big {
    font-size: 1.5em;
}

but later on you want this one paragraph in a sidebar to have larger font AND be blue... well, you could create an entirely new selector and include both properties, or you could just stick both those class names inside the element and it will be styled with both the color and larger font. 

<p class="text-blue text-big">
    words and stuff
</p>

It just allows you to create cleaner code without a bunch of extra selectors that you don't necessarily have to create.

Your Example: In your example though, yes, the .t-border would override the previous one because it comes later in the code. Due to the nature of the "cascading" part of CSS, if 2 selectors have the same level of specificity (in this case they're both classes so they have the same level of specificity) then the one that comes last within the code(CSS) will take precedence.

Kenneth Simpson
Kenneth Simpson
1,162 Points
Kenneth Simpson
Kenneth Simpson
1,162 Points

I really appreciate the quick response! That makes sense now that you have given that example! Thank you.