Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

CSS Basics

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

The Cascade: Specificity and Source Order

5:01 with Anwar Montasir

Once origin and importance are sorted out by the CSS cascade, there still might be conflicts left over. So the browser next examines selector specificity. When I say selector specificity, I mean that how the style was written determines the priority in settling conflicts, with more specific methods overriding less specific ones.

How the CSS cascade settles conflicts

The CSS Cascade uses the following to settle conflicts, listed in order from highest weight to least weight.

  1. Origin and Importance

  2. Selector specificity

  3. Source order

Further reading

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    Once origin and importance are sorted out by the CSS cascade 0:00
    there still might be conflicts left over. 0:04
    So the browser next examines selector specificity. 0:08
    When I say selector specificity, I mean that how the style was 0:12
    written determines the priority in settling conflicts, with more 0:17
    specific methods overriding less specific ones. In particular, 0:22
    CSS considers inline styles to be more specific than any other styles, 0:27
    which is one reason why developers recommend avoiding them. 0:34
    Besides inline styles, selectors, which come in the form of ID, 0:40
    class, or type selectors, each have their own specificity level. 0:45
    Let's experiment with the cascade by adding a class 0:51
    and an id to our h1 element. Then we'll try 0:57
    adding a few competing text colors. 1:03
    Which one of these three do you suppose will show up in our browser? 1:26
    If you said white, great job. All three rules set 1:34
    a color property, have the same importance and origin. But ID 1:39
    selectors have a higher specificity than class and element selectors. 1:45
    So the white color from the ID selector gets applied. Of course, 1:51
    a class and an ID with the same name could get quickly confusing. 1:56
    So I'm going to delete this example I created. 2:01
    Even after considering selector specificity, there can still be conflicts. 2:07
    Let's give just an ID to our h1 element 2:14
    and then create two competing rules in our CSS. 2:20
    The origin is the same here, and the selector specificity 2:37
    is a tie since both selectors or IDs. In this case, 2:43
    the CSS cascade uses its third tiebreaker called source order. 2:47
    According to the cascade, properties written later in the style sheet 2:55
    will override the ones written earlier. 3:00
    So in this example, the heading would be yellow, 3:04
    since it appears later in the style sheet than the black declaration. 3:07
    In addition, if we were to link two or 3:15
    more style sheets in the head section of the page, the last style 3:18
    sheet will take precedence over the others whenever conflicts arise. 3:22
    I'm going to create a new file called style2.css and 3:28
    create another selector for my heading ID. 3:36
    The rule setting my heading to red comes from the last style sheet 3:45
    attached, so my heading is red in the browser. 3:50
    Let's reduce this down to just one declaration before we move on and 3:56
    erase all the competing styles. 4:02
    The key lesson here is we've now seen 4:15
    a vivid example of how the CSS cascade settles conflicts. 4:18
    To wrap things up, the main purpose of 4:25
    the CSS cascade is to assign a weight to each declaration. 4:28
    After considering its origin and importance, specificity, and 4:33
    source order, and that weight determines 4:38
    exactly which style declarations are applied to an element. 4:41
    I've included a few readings in the Teacher's notes if you'd like to 4:46
    learn more about the CSS cascade. Familiarity with how the cascade 4:49
    works can save you time trouble- shooting and maintaining your CSS. 4:54

    You need to sign up for Treehouse in order to download course files.

    Sign up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up