Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
1×
Become a member
to unlock all features
Autoplay

    Style Elements Using the Cascade

    Tyler ClarkTyler Clark
    cssCSS

    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.

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    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.

    Discuss

    Discuss