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) Fundamental Concepts The Cascade: Specificity and Source Order

Micole Noddle
Micole Noddle
5,797 Points

What inline element is Guil talking about in this video?

I see the h1, but its color is set to green and he's talking about it being set to tomato. Is there a part of the code missing or is the h1 in the video the inline element he's referring to? Very confusing!

Here's a link to the video:

https://teamtreehouse.com/library/css-basics-2/fundamental-concepts/the-cascade-specificity-and-source-order

2 Answers

Treasure Porth
STAFF
Treasure Porth
Treehouse Teacher

Guil is referring to the same h1 tag in the example. The h1 tag is set to both green and tomato. Because he's discussing the order in which styles cascade down to the HTML elements, he's set the h1 tag to both green and tomato to demonstrate that inline styling will always take precedence over the code in the stylesheet. Because inline styling always takes precedence, the h1 color with be tomato, even though in the stylesheet it's set to green.

The key here is the term "inline". If you recall in one of the first videos in this course (I know it's hard to remember everything), Guil discussed types of CSS code: inline, embedded, and external. The rule Guil created that would make h1 green would most likely be an external rule: you'd find it on his CSS stylesheet file. The rule Guil created that would make h1 tomato is an inline rule: he placed it in the <h1> tag itself, which we'd find on his HTML file. Inline rules have specificity over external rules, so h1 would be tomato in this case.