- 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
Debugging Styles Solution
5:55In this video, I'll show you one solution to the "Debugging Styles" exercise.
Hi there, were you able to debug
the CSS problems in the RSVP app?
0:00
Even if you fixed some parts,
that's still great.
0:04
So now I'm gonna show you what I did.
0:06
First up, let's see what's preventing
the header background from showing
0:08
up on the page.
0:11
I'll open Chrome DevTools, and
inspect the header element.
0:12
Everything looks pretty good
in the Styles pane, except for
0:17
the crossed out background
property in the header rule.
0:20
To the left of the cross.property
I see a warning,
0:23
hovering over it displays
the text invalid property value.
0:26
Can you spot the issue?
0:30
Well gradient is an invalid CSS value,
so it's disabling the entire
0:32
background value including the background
image and background repeat values.
0:37
These are values used to
display a linear ingredient,
0:41
so we need to change this to
linear-gradient and that fixed it.
0:45
Next the heading is too close
to the top edge of the app.
0:50
It's throwing off the layout of the form.
0:54
Inspecting the h1 styles
shows me that there's
0:57
an element.style setting its margin to 0.
1:01
It's overriding the margin top and margin
bottom property set in the h1 rule, and
1:04
I know that because they
are crossed out and
1:08
turning off the margin 0
decoration resolved the problem.
1:10
Well over in the Elements panel, I see
the in line style with margin set to 0.
1:14
So removing it from the markup by double
clicking the opening tag, selecting and
1:20
deleting it reapplies the desired margins.
1:25
Now let's see what's going on
with the form's submit button.
1:30
Inspecting the button shows me that
its background color value is being
1:34
overwritten by the background color
set in the button last-child rule.
1:37
Also it looks like this button rule
is applying unnecessary top and
1:43
right margins to the submit button,
which explains why it's not as tall and
1:46
as wide as it should be.
1:51
And turning off the margin properties
in the button rule, and the background
1:53
color property in the button last-child
rule does in fact fix the problem.
1:58
But why is this happening?
2:03
Well the properties in the button
last-child and button rules are meant for
2:06
styling the guest buttons only,
but they're declared with
2:11
button element selectors which
target all buttons on the page.
2:15
The submit button is also
a button element, and
2:19
since there are no margin properties
declared in its button submit rule,
2:23
it's taking on the margin properties
declared here in the button rule.
2:27
The submit button is also
a last-child of the form.
2:32
The button last-child pseudo class
selector has a higher specificity
2:36
than the button submit selector, so it's
overriding its background color property.
2:40
To fix this, we can either update
the selectors to specifically target
2:46
buttons that are descendants of the class
guest with the descendant selectors.
2:51
So I'll type guest in front
of each button selector.
2:56
Or we could add a class to the edit and
remove buttons, then target the classes in
3:07
your CSS, but I'll stick with
descendant selectors for this exercise.
3:11
And now the guest button rules
are grayed out in the Styles pane
3:17
because they are no longer targeting and
applying styles to the submit button.
3:20
Finally the guest list items
are being displayed on separate lines
3:24
when they should be displayed as
four equal sized items side by side
3:27
when the view port is 469 pixels or wider.
3:32
Well if I inspect the parent UL's box
model properties in the computed pane,
3:35
I see that's it's not taking up a full
line on the page as it should be.
3:41
Remember, UL elements are block
level elements by default.
3:46
Switching over to the Styles pane,
we see that there's an id selector on
3:50
line 27 overriding the display
flex property applied to the guest
3:55
list selector down in
the media query on line 193.
3:59
So setting its display
to inline block here.
4:03
IDs have higher specificity than class and
element selectors, so
4:08
even though the ID appears before this
class in the CSS, it's overriding
4:11
the display flex declaration and turning
the ID's display property off fixes it.
4:17
Good.
4:23
Now once last issue.
4:24
There's all this white space on the left
and right sides of the guest list.
4:25
Inspecting the guest list's UL
4:30
shows that the left edge of the UL is
up against the right edge of the h2.
4:33
Well earlier I hinted that the float
properties have something to do with this.
4:38
The h2 and label and check box below
it are positioned using floats.
4:42
H2 is floated left and the label right.
4:48
Now the guess-list UL
does not have a float.
4:52
So the space between the two floated
elements in the UL needs to be cleared.
4:56
We need to set the UL to move down and
pass clear to both the left and right floats.
5:00
So selecting the guest list UL,
and in the media query
5:05
adding clear both to the rule fixes
the layout, and we're all set.
5:10
I've made lots of changes.
5:17
So now I can click over to the sources
panel, copy my changes and
5:19
paste them into my style sheet.
5:24
Let's not forget to remove the inline
margin 0 declaration for the h1.
5:33
>> You may have done things
differently and that's okay.
5:41
Remember we're always here to help, so
5:45
if you have questions about
anything covered in this workshop,
5:46
feel free to reach out to the Treehouse
staff or other students in the community.
5:49
Thanks everyone and happy debugging.
5:53