Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS CSS Basics (2014) Understanding Values and Units Text Styles

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

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

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

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

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