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

Micole Noddle
Micole Noddle
5,797 Points
Posted by 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
Treasure Porth
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.

Antonio Jaramillo
Antonio Jaramillo
15,604 Points
Antonio Jaramillo
Antonio Jaramillo
15,604 Points

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.