Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Debugging CSS with Chrome DevTools!
You have completed Debugging CSS with Chrome DevTools!
Preview
Learn to quickly disable and enable CSS properties, edit the value of a property, and add a CSS property to a rule.
Resources
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
When building your projects,
you will often want to quickly test
0:00
how the designer layout looks with or
without certain CSS properties.
0:03
For example, if you've set
a background image on an element,
0:06
you could use the dev tools to test if
the content is still presentable or
0:09
readable without the background image.
0:13
Or if you're building your layout
with Flexbox, you may need to turn
0:15
certain Flexbox properties off and
back on to see how it affects your layout.
0:18
Or to test any fallback
properties you've defined.
0:22
In the Styles pane, you are able to
turn an element CSS properties off and
0:26
back on by clicking the check box that
appears to the left of a property
0:30
when you hover over it.
0:35
So if I select the header element,
And uncheck the background property.
0:36
Notice how the entire
property is crossed out, and
0:44
the browser does not display
a background in the header.
0:47
And I can uncheck any property to test
how it affects the selected element,
0:55
then check the boxes
to reapply the styles.
0:58
So this is one of the fastest methods for
spotting CSS errors.
1:11
It helps you see whether or not the CSS
you wrote is actually being applied or
1:15
if it's being overwritten elsewhere.
1:20
You can also quickly change
the value of a CSS properties.
1:22
So for example,
I'll select the h1 in header,
1:26
then click inside its font size value,
and change it to a larger font size.
1:31
I can press the up arrow key
to make the value larger and
1:36
the down arrow to make it smaller.
1:39
I can even click inside the text-shadow
property, and adjust the offset and
1:44
blur values, As well as test different
colors with this handy color picker.
1:49
To add a CSS property to a rule,
simply click anywhere in the rule and
2:01
the Styles pane creates
a blank decoration.
2:06
So let's see how a letter spacing
value of 0.3m affects the heading.
2:09
And as you can see, it even
autocompletes the CSS property for you.
2:14
CSS does not let you know if your
code contains invalid declarations or
2:18
syntax errors.
2:23
So up next,
you'll learn to quickly identify and
2:24
fix errors in your CSS
using the styles pane.
2:27
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up