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 How to Make a Website Customizing Colors and Fonts Resize Text

Sunny Patel
Sunny Patel
791 Points
Posted by Sunny Patel
Sunny Patel
791 Points

Explain the concept of Cascading CSS

In the video, Nick inserts a second body selector where he inserts the following: font-family: 'Open Sans', sans-serif. He inserts this selector before the h1 selector which received the following:

font-family: 'Changa One', sans-serif; margin: 15px 0; font-size: 1.75em; font-weight: normal; line-height: 0.8em;

I understand why he did that. It is so that the styling applied to h1 is not altered by the styling applied to the body. I wanted to get a more visual understanding of this concept so I moved the body selector underneath the h1 selector. My thoughts were that h1 will now have the font Opens Sans applied to it, but whenever I would refresh the page, the font would still appear as Changa One. Can someone explain to me why this didn't work?

Note: the h1 element is nested within the body element.

1 Answer

Ali M Malik
Ali M Malik
33,293 Points
Ali M Malik
Ali M Malik
33,293 Points

There are two things that affect how your css when it is read by the browser, the order, that's when it is cascading, and selector specificity. When I select the h1 and give it color: red and at the same time I gave the body color: blue --regardless of it being before or after-- the h1 will be red.

The cascading nature of css can be seen in an example like this:

h1 {
   color: red;
}

h1{
   color: blue;
}

in this case the later property is the one you see.

Hope this helps. Ali M