- Introduction to Chrome DevTools 2:11
- Getting to Know the Elements Panel 4:32
- Inspecting Styles 5:26
- Viewing Inherited and User Agent Styles 3:58
- Adding and Editing Styles 2:31
- Identify and Debug Errors 4:28
- Visualizing the Box Model and Computed styles 3:59
- Debugging Styles Challenge 2:05
- Debugging Styles Solution 5:55
Preview
Video Player
00:00
00:00
Viewing Inherited and User Agent Styles
3:58The "Styles" pane also displays which properties are being inherited by (or passed down to) the selected element, as well as properties applied by the browser's default stylesheet (User Agent stylesheet).
As you've learned,
CSS Styles can cascade down or
0:00
be applied to elements from
many different places.
0:03
You've seen how the Styles pane helps you
understand exactly where styles are being
0:05
declared and which properties are being
overridden by other properties.
0:10
Well, the Styles pane also displays
which properties are being inherited or
0:14
passed down to the selected element.
0:18
As well as properties applied by
the browser's default stylesheet or
0:20
the user agent style sheet.
0:23
Select the body element.
0:26
And in the Styles pane,
we see the CSS I wrote, to style the body.
0:28
For example the font-family, color and
background-color styles, and
0:32
below these rules is a CSS
rule inside a gray box.
0:36
Well, I didn't write the CSS,
0:39
these are styles being applied by what's
called the user agent stylesheet.
0:41
This is the stylesheet supplied
by the browser itself.
0:45
For example the body element is displayed
as block with an 8 pixel margin
0:48
by default.
0:53
And some of these styles are often
overridden by the CSS you write.
0:54
So for example,
I'll add margin zero to the body rule.
0:57
And notice how the margin property in the
user agent stylesheet gets crossed out.
1:03
Selecting the h2, shows that the browser
by default is displaying it block, setting
1:10
its font-weight to bold and applying space
around it with webkit specific margin
1:15
properties like webkit-margin-before and
webkit-margin-after.
1:20
Now even though we're inspecting the h2,
below the user agent rule
1:26
is an area labeled Inherited from body,
that shows the body rule.
1:31
Well, this area shows that the h2 is
inheriting certain properties from
1:36
the body element like font-family and
1:41
color because the h2 is
a descendant of body.
1:43
So for example, if I uncheck the
properties in the body rule, the font and
1:47
color changes are applied to the h2,
1:50
as well as other elements
inheriting these properties.
1:53
So I'll refresh the page
to bring them back.
1:56
And you'll notice that
the background-color property is dimmed,
1:58
or grayed-out.
2:03
Well, background-color is
a non-inheritable property, meaning
2:04
elements cannot inherit its value the way
they do with font and color values.
2:09
So anytime you see dimmed or grayed-out
properties in the Inherited from values,
2:13
it means that the property's not being
applied to the selected element,
2:17
because it's non-inheritable.
2:21
So remember, a crossed-out property
means that it's been overridden
2:23
by a more specific property.
2:28
And a dimmed or grayed-out property
means something different.
2:30
It means that it's not being applied to or
inherited by the selected element.
2:34
So now let's look at another example
of user agent stylesheets and
2:39
inherited properties in the Styles pane.
2:42
When you select a guest list item,
2:47
you'll see that the user agent stylesheet
sets its display value to list-item and
2:49
text-align to
webkit-match-parent by default.
2:55
And below, we know that the li is
inheriting styles from its parent,
3:00
the invited-list ul.
3:05
Because we see the ul in the Inherited
3:06
from rule with
list-style-type set to none.
3:09
Meanwhile the padding and margin
properties applied to the ul are not
3:13
inheritable properties so
they appear grayed out.
3:17
In other words, their values are not
being passed down to the li's.
3:19
Now, the area below shows that
the user agent stylesheet by default
3:23
sets a ul list-style-type value to disc.
3:28
Because list-style-type is
an inheritable CSS property that gets
3:32
passed down to the selected li's.
3:35
But can you figure out
why it's crossed out?
3:38
This is happening because
the actual "list-style-type" value,
3:41
the li is inheriting from the ul is
declared in our stylesheet on line 82.
3:46
So it's overriding the user agent
stylesheet, therefore it's crossed out.
3:50