Complete these interactive tutorials to learn the basics of viewing and changing a page's CSS usingChrome DevTools.

View an element's CSS

1. Right-click theInspect me! text below and selectInspect. TheElements panel of DevTools opens.

   Inspect me!

2. Observe theInspect me! element highlighted blue in theDOM Tree.

   

3. In theDOM Tree, find the value of thedata-message attribute for theInspect me!element.

4. Enter the attribute's value in the text box below.

5. In theElements >Styles tab, find thealoha class rule.

   TheStyles tab lists the CSS rules being applied to whatever element is selected in theDOM Tree, which should still be theInspect me! element.

6. Thealoha class is declaring a value forpadding. Enter this value and its unit without spaces in the text box below.

If you'd like to dock your DevTools window to the right of your viewport, like on the screenshot in step one, seeChange DevTools placement.

Add a CSS declaration to an element

Use theStyles tab when you want to change or add CSS declarations to an element.

1. Right-click theAdd a background color to me! text below and selectInspect.

   Add a background color to me!

2. Clickelement.style near the top of theStyles tab.

3. Typebackground-color and pressEnter.

4. Typehoneydew and pressEnter. In theDOM tree, you can see that an inline style declaration was applied to the element.

Add a CSS class to an element

Use theStyles tab to see how an element looks when a CSS class is applied to or removed from anelement.

1. Right-click theAdd a class to me! element below and selectInspect.

   Add a class to me!

2. Click.cls. DevTools reveals a text box where you can add classes to the selected element.

3. Typecolor_me in theAdd new class text box and then press Enter. A checkbox appears belowtheAdd 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 togglethem from here.

Add a pseudostate to a class

Use theStyles tab to apply a CSS pseudostate to an element.

1. Hover over theHover over me! text below. The background color changes.

   Hover over me!

2. Right-click theHover over me! text and selectInspect.

3. In theStyles tab, click:hov.

4. Check the:hover checkbox. The background color changes like before, even though you're notactually hovering over the element.

For more information, seeToggle a pseudo-class.

Change the dimensions of an element

Use theBox Model interactive diagram in theStyles tab to change the width, height, padding, margin, or border length of an element.

1. Right-click theChange my margin! element below and selectInspect.

   Change my margin!

2. To see theBox Model, click theShow sidebar button in the action bar on theStyles tab.

3. In theBox Model diagram in theStyles tab, hover overpadding. The element's padding is highlighted in the viewport.

4. Double-click the left margin in theBox Model. The element currently doesn't have margins, so themargin-left has a value of-.

5. Type100 and pressEnter.

TheBox Model defaults to pixels, but it also accepts other values, such as25%, or10vw.

Key point: Alternatively, in rule declarations in theStyles tab, you can changelength properties and their units with your pointer.