Complete these interactive tutorials to learn the basics of viewing and changing a page's CSS using Chrome DevTools.
View an element's CSS
Right-click the
Inspect Me!text below and select Inspect. The Elements panel of DevTools opens. TheInspect Me!element is highlighted in the DOM Tree.In the DOM Tree, find the value of the
data-messageattribute for theInspect Me!element.Enter the value in the text box below.
The Styles tab on the Elements panel lists the CSS rules being applied to whatever element is currently selected in the DOM Tree, which should still be the
Inspect Me!element in this case. Find thealohaclass rule. The fact that you see this rule means that it's being applied to theInspect Me!element.The
alohaclass is declaring a value forpadding. Enter that value in the text box below.
If you'd like to dock your DevTools window to the right of your viewport, like you see in Figure 1, see Change DevTools placement.
aloha, are displayed in the Styles tab
Add a CSS declaration to an element
Use the Styles tab when you want to change or add CSS declarations to an element.
Right-click the
Add A Background Color To Me!text below and select Inspect.Click
element.stylenear the top of the Styles tab.Type
background-colorand press Enter.Type
honeydewand press Enter. In the DOM Tree you can see that an inline style declaration was applied to the element.
background-color:honeydew declaration
has been applied to the element via the element.style section
of the Styles tab
Add a CSS class to an element
Use the Styles tab to see how an element looks when a CSS class is applied to or removed from an element.
Right-click the
Add A Class To Me!element below and select Inspect.Click .cls. DevTools reveals a text box where you can add classes to the selected element.
Type
color_mein the Add new class text box and then press Enter. A checkbox appears below the Add new class text box, where you can toggle the class on and off. If theAdd A Class To Me!element had any other classes applied to it, you'd also be able to toggle them from here.
color_me class has been applied to the
element via the .cls section of the Styles tab
Add a pseudostate to a class
Use the Styles tab to permanently apply a CSS pseudostate to an
element. DevTools supports :active, :focus, :hover, and :visited.
Hover over the
Hover Over Me!text below. The background color changes.Right-click the
Hover Over Me!text and select Inspect.In the Styles tab, click :hov.
Check the :hover checkbox. The background color changes like before, even though you're not actually hovering over the element.
:hover pseudostate on an element
Change the dimensions of an element
Use the Box Model interactive diagram in the Styles tab to change the width, height, padding, margin, or border length of an element.
Right-click the
Change My Margin!element below and select Inspect.In the Box Model diagram in the Styles tab, hover over padding. The element's padding is highlighted in the viewport.
Double-click the left margin in the Box Model, which currently has a value of
-meaning that the element doesn't have a left-margin.Type
100and press Enter. The Box Model defaults to pixels, but it also accepts other values, such as25%, or10vw.
