Adding and Editing Styles2:31 with Guil Hernandez
Learn to quickly disable and enable CSS properties, edit the value of a property, and add a CSS property to a rule.
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 up