Style Elements Using the Cascade

Tyler Clark
InstructorTyler Clark
Share this video with your friends

Social Share Links

Send Tweet
Published 6 years ago
Updated 3 years ago

CSS is an acronym for cascading style sheets. It can be frustrating when working with CSS and elements are not styling correctly because there is a conflicting style lower on the cascade. Let's look at how the browser uses the cascade to determine which styles to implement.

Instructor: [00:00] Let's go ahead and style all of our li's to be the color red that we see here. We'll do that by doing li color red. Save and refresh. Everything's red. Great. Let's copy this and do the same thing, li, but give it a color of blue and save. We'll see that everything turns to blue even though we still have the color red above it.

[00:22] CSS is an acronym for Cascading Style Sheets, which points to the fact that source order, or how we define our styles, actually affects what gets displayed in the browser. When styles conflict like this, the browser will look at specificity, then to the source order that we define our styles.

[00:40] Since these two li's are the same specificity, the lower li color value is applied, as we see. This is true for any type of selector. Let's give one li a class of home. Now we'll change this top li to a color of red, which will change the one to red.

[00:57] Then, if we add this second one of color blue, we'll see that blue still wins. It doesn't matter what selector you use. The bottom of the cascade will always win.

[01:07] Let's go ahead and add another class to our li. We'll say home--two. We'll change this second class to --two. Save and refresh. You can see that it still stays blue. It doesn't matter how many classes we have on this li. When two selectors collide, it's going to take whatever class is lower.

[01:27] Even we switch up the order -- we do home--two and then home -- we see that blue still wins because home--two lives lower on the cascade. It doesn't matter the order of the classes here. What matters is the source order.

egghead
egghead
~ 3 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today