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

Roger Hauber
Roger Hauber
1,206 Points
Posted by Roger Hauber
Roger Hauber
1,206 Points

Which class does a css style refer to?

I am in module 1 of Introduction to HTML and CSS. The header <h1></h1> has two class attributes - "tag" and "name" and we learn to customize its colour via the .tag style element in the styles.css file. But when we want to customize the colour of the <p></p> tag which also has to two class attributes - "tag" and "location", we do that by changing not the colour in the .tag style element, but rather in the .location style element. This is a bit confusing, as it is unclear to me, why in the one case, the header takes the style specifications of its first class attribute, while in the other the first class is apparently ignored and only the "location" class is relevant.

1 Answer

rydavim
rydavim
18,814 Points
rydavim
rydavim
18,814 Points

I don't have the specific code you're talking about available, but I will try to speak generally.

Example:

<body>
  <div class="elem, divs">
    <p class="elem, ps">Paragraph</p>
  </div>
</body>

.elem { color: blue; }
.ps { color: pink; }

So, what color is the p element here? Remember that CSS stands for Cascading Style Sheets, so both importance and order matter. An #id style takes priority over a .class style, for example. Styles with the same priority will be applied and overridden in order.

So in this case .elem styles are applied to both the div and p elements. .ps styles are only applied to the p element, and override the .elem styles, because it appears later in the CSS file.

Hopefully that helps, but let me know if it's still confusing. Keep it up!

Roger Hauber
Roger Hauber
1,206 Points
Roger Hauber
Roger Hauber
1,206 Points

Thanks so much, that completely cleared it up! As a follow up: what is the order of priorities? id > class > ... ? What other style "types" are there and where would they fit into that hierarchy?

Thanks again!

rydavim
rydavim
18,814 Points
rydavim
rydavim
18,814 Points

Generally speaking the more specific a style is, the higher priority it has.

  1. !important and inline-styles - These are styles which are either marked !important to override everything, or included directly in your html `<p style="color: blue;">. You almost never want to use these options, apart from very specific exceptions.
  2. #id - IDs are unique to a specific element. Since these are applying to only one thing, they are very specific and receive priority.
  3. .class, [attribute], and :pseudo-classes - Don't worry too much about attributes and pseudo-classes, you'll learn about them a bit later. classes are similar to IDs, but since they can apply to multiple elements they have lower priority.
  4. elements and pseudo-elements - Again, don't worry about pseudo-elements yet. Normal element tags apply more generally than IDs and classes, so they're down here at the bottom.

Now, there are a couple of other contributing factors you need to remember.

You can chain selectors when writing CSS rules. Since this makes the rule more specific, it'll bump it up the hierarchy. 

<body>
  <p>Jabberwocky<p>
  <div>
    <p>Vorpal Sword</p>
  </div>
</body>

p { color: darkgrey; }
div p { color: red; }

So what color is Vorpal Sword <p> here? Because div p is a more specific selector than just p, it'll be red.

The same holds true for styles which are defined for the same element later on. While this shouldn't happen in the same file, sometimes you'll load more than one CSS file. For example, you might have a general style file or reset file and then a more specific file for custom css that overrides some styles.

Hope that helps, have fun coding!