- 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
Inspecting Styles
5:26The "Styles" pane provides tools to help you with CSS debugging. You're able to edit, add and remove CSS properties and see the changes immediately applied to the page.
When you select an element
in the Elements panel,
0:00
you can inspect the styles
applied to it in the Styles pane.
0:03
The Styles pane provides a lot of
tools to help you with CSS debugging.
0:06
In the Styles pane,
you're able to edit, add, and
0:10
remove CSS properties and see the changes
immediately applied to the page.
0:14
And like the elements panel,
changes you make aren't permanent.
0:18
So they won't change
the code in your CSS file.
0:22
In this video, I'll discuss three useful
features of the elements panel and
0:25
styles pane.
0:28
You'll learn how they list the CSS
rules applied to an element,
0:30
add attributes to an element.
0:33
And display exactly where
styles are being declared,
0:35
and which properties are being
overridden by other properties.
0:38
The Styles pane, not only lets you
inspect CSS properties, but also
0:42
helps you understand how CSS rules are
applied by the browser, via the cascade.
0:46
The cascade is what determines which
styles are assigned to an HTML element.
0:51
If you're not sure about how the cascade
works, check out the teacher's notes for
0:55
videos and courses that cover it.
0:58
Select the submit button on this page, and
1:03
the Styles pane shows the CSS
rules applied to the button.
1:06
The rules are listed from
highest priority to lowest.
1:10
Now, styles that are applied directly to
an element, using the style attribute,
1:14
have the highest priority or
specificity in CSS.
1:19
So at the top of the Styles pane,
1:22
the element.style rule shows you any
inline CSS applied to the element.
1:23
An inline CSS can be written directly
in an HTML tag or added by JavaScript.
1:29
Right now, the rule is empty, so if I
right-click on the form submit button and
1:36
select, Add Attribute,
I can add a style attribute.
1:42
Set the color to red.
1:47
And color red appears inside
the style element.style rule and
1:54
the button color turns red.
1:58
The inline color property we set has a
higher specificity than the color property
2:05
originally applied in
the button submit rule.
2:10
So notice that the property
is crossed out.
2:13
CSS properties that have been overridden
by properties and other rules like this,
2:16
are shown with strike-through text.
2:20
Below the element.style rule,
2:23
the Styles pane displays any CSS
rules that match the element.
2:25
For example, the padding,
font size, background color, and
2:30
border radius styles currently
being applied to the submit button
2:32
are declared in the button submit
rule on line 56 of style.css.
2:36
And below this rule, other properties
associated with this button like border,
2:41
outline, and
2:46
cursor properties are defined in separate
rules shared by all button elements.
2:47
And the box sizing property below it is
also associated with the button element,
2:51
since it's declared inside a rule using
the universal selector which matches every
2:55
element on the page.
3:00
And if you mouse over
a selector in the Styles pane,
3:02
the browser highlights all elements
that are affected by that selector.
3:05
So for example,
3:09
placing my mouse over the button submit
rule highlights the submit button only.
3:10
Hovering over button highlights
all the button elements and
3:16
placing it over the universal rule
highlights every element and so on.
3:19
Selecting the edit button inside
a guest list item, shows that,
3:26
its styles are declared inside
the guest button rule on line 130.
3:32
And below, we see the same base
styles applied to all buttons.
3:37
Selecting the remove button,
3:42
it also shows that the styles
are applied within guest button.
3:43
But notice the CSS rule
that appears above it.
3:48
The guest button last-child rule sets the
background color for the remove button.
3:51
So it shows that it's overriding
the background color property set
3:57
in guest button,
as you can see it's crossed out.
4:01
Next, select one of the guest list items.
4:08
And you'll notice that
two media query rules,
4:12
appear above the initial guest rule.
4:15
Well since my browser viewport is
currently wider than 769 pixel and
4:19
880 pixel,
the styles are applied to the element and
4:24
appear here in the Styles pane.
4:27
And then as you'll see the flex-basis
value in the 769 pixel media query is
4:29
being overridden by the value defined in
the widest media query breakpoint at 880
4:33
pixels.
4:38
So it's crossed out.
4:39
Now when I resize the browser to
a viewport size narrower than 880 pixels,
4:41
we no longer see the 880 pixel
media query in the Styles pane.
4:46
We just see the one for 769 pixels.
4:50
And if I shrink it to a width
narrower than 769 pixels,
4:52
we see a new media query rule up here in
the Styles pane, the one styling the guest
4:57
element at the smallest breakpoint
you'll find in the CSS.
5:02
So these are features
you'll frequently use and
5:06
the ones I use every day to debug CSS.
5:09
In the next video, you'll learn other
parts of the Styles pane that let you know
5:12
which properties of an element are being
inherited or pass down by other elements.
5:16
As well as properties applied by
the browser's default style sheet or
5:20
the user agent style sheet.
5:24