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
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