Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
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."
[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