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: Origin and Importance

3:08 with Anwar Montasir

An important part of learning CSS, is understanding how CSS rules are applied by the browser via the cascade. In CSS, the cascade is what determines which styles are assigned to an HTML element. Without the cascade, CSS might as well stand for "Conflicting Style Sheets."

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

    [MUSIC] 0:00
    Well done. 0:04
    You've learned quite a bit about working with style sheets. 0:05
    You've learned the benefits of keeping your styles in an external file. 0:09
    You've learned some important resources for keeping your skills sharp. 0:14
    You've worked with a variety of selectors, properties, and values. 0:18
    And yet, it feels like something's missing, doesn't it? 0:24
    CSS stands for Cascading Style Sheets, after all. 0:27
    By making it this far through the course, you've gotten some solid practice 0:32
    working with style sheets. But what makes them Cascading Style Sheets? 0:37
    An important part of learning CSS is understanding how CSS 0:43
    rules are applied by the browser via the cascade. 0:48
    In CSS, the cascade 0:53
    is what determines which styles are assigned to an HTML element. 0:54
    Without a cascade, CSS might as well stand for conflicting style sheets. 1:00
    For example, if we write a rule that tells our h1 elements to be red, 1:07
    then somewhere else we write another rule that tells them to be blue, 1:12
    we have two style declarations contradicting each other. 1:17
    So which one will win? That's where the cascade 1:21
    helps resolve the conflict between two or more declarations. 1:25
    The first measure the CSS cascade uses to settle conflicts in 1:31
    CSS is called origin and importance. 1:35
    When I say origin, I mean that CSS styles can come from three 1:40
    different sources. The first is the user agent style sheet. 1:45
    Which, if you remember way back to the beginning of this course, 1:49
    means the CSS a browser applies by default. 1:54
    Another source is the user style sheet, which contains style set by a user. 1:58
    Users can have special styles predefined 2:04
    that override some of the browser's default styles. 2:07
    These are often used for accessibility to assist users with disabilities, 2:12
    who may need larger font sizes, specific colors or higher contrast on the page. 2:18
    The third source is the author style sheet, 2:25
    which contains the CSS we write to style the HTML page. 2:28
    So all the CSS we've written up to this point was written in 2:33
    author style sheets. By default, the CSS and author style sheets 2:38
    has more importance than user agent and user style sheets. 2:42
    But determining origin doesn't settle all conflicts by itself. 2:48
    After all, you could have two conflicting styles in your author style sheet. 2:54
    From there, the CSS cascade looks at selector specificity. 3:00
    We'll take a look at that next. 3:05

    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