This course will be retired on July 12, 2021. We recommend "CSS Basics" for up-to-date content.
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.
Quick Reference
[MUSIC]
0:00
Now that we've explored many of the core
features of CSS, it's time to take this
0:04
knowledge further by reviewing a few more
important fundamental CSS concepts.
0:08
As we know, CSS stands for Cascading Style
Sheets.
0:14
And we know that style sheets are the
documents we use to write CSS.
0:17
But what does cascading actually mean?
0:21
An important part of learning CSS is
understanding how CSS rules are applied by
0:24
the browser via what's called the cascade.
0:29
In CSS, the Cascade is what determines
which styles are assigned to an element.
0:32
Without the Cascade, CSS might as well
stand for Conflicting Style Sheets.
0:38
For example, if we write a rule that tells
our h1 elements to be red,
0:42
[SOUND] then somewhere else we write
another rule that tells them to be blue,
0:46
well, we have to two style declarations
contradicting each other.
0:50
So, which one will win?
0:54
Well, that's where the Cascade helps
resolve the conflict between two or
0:56
more declarations.
1:00
CSS styles can cascade down to elements
from many origins.
1:01
And [SOUND] there are three main steps or
sources of style information that
1:05
Cascade follows to determine which
properties get assigned to an element.
1:09
Those steps are [SOUND] importance,
[SOUND] specificity, [SOUND] and
1:13
source order.
1:16
So let's go over these.
1:17
[SOUND] First, importance depends on the
origin of the style sheet,
1:19
which can come from different sources.
1:23
One of those sources is the [SOUND] User
Agent style sheet,
1:25
which is the CSS a browser applies by
default.
1:29
As we've learned in previous lessons,
1:32
each browser has its own User Agent style
sheet.
1:35
Another [SOUND] source is the User [SOUND]
style sheet,
1:38
which contains styles set by a user.
1:40
Users can have special styles predefined
that override some of
1:43
the browser's default styles, and these
are oftentimes used for accessibility for
1:46
users with special needs who may need
larger font sizes, specific colors or
1:52
contrast on the page.
1:56
[SOUND] The third source is the Author
style sheet,
1:58
which contains the CSS we write to style
the HTML page.
2:01
So, all the CSS we've written up to this
point were written in
2:05
an Author style sheet.
2:08
And by default, the CSS in an Author style
sheet has
2:09
more importance than User Agent and User
style sheets.
2:12
Once the Cascade decides the importance of
a CSS property based on a source origin,
2:17
the next step assigns its specificity, and
we'll cover that next.
2:22
You need to sign up for Treehouse in order to download course files.
Sign up