Get Started With Viewing And Changing CSS

Complete these interactive tutorials to learn the basics of viewing and changing the CSS for a page using Microsoft Edge DevTools.

Open CSS Examples

  1. Hold Control (Windows) or Command (macOS) and click CSS Examples to open in a new window.

    CSS Examples

Note

If you want to dock your DevTools window to the right of your viewport (displayed in Figure 1), click Customize and control DevTools .... On the Customize and control DevTools drop-down menu, in the Dock side section, select Dock to right.

View the CSS for an element

  1. Open CSS Examples.

  2. Right-click the Inspect Me! text and select Inspect.

    1. In DevTools, on the Elements panel, in the DOM Tree tab, the Inspect Me! element is highlighted.

      Figure 1

      The inspected element is highlighted in the DOM Tree
      The inspected element is highlighted in the DOM Tree

    2. In the Inspect Me! element, find the value of the data-message attribute and copy it.

  3. On the page, in the Value of data-message: textbox, enter the value.

  4. Right-click the Inspect Me! text and select Inspect.

    1. In DevTools, on the Elements panel, select the Styles tab.

    2. In the Styles tab, the Inspect Me! element is highlighted.

    3. In the Inspect Me! element, find the aloha class rule.

      Note

      You see this rule because it is being applied to the Inspect Me! element.

    4. In the aloha class, find the value for the padding style and copy it.

      Figure 2

      CSS classes being applied to the selected element, such as aloha, are displayed in the Styles tab
      CSS classes being applied to the inspected element are highlighted in the Styles tab

  5. On the page, in the Value of padding: textbox, enter the value.

Add a CSS declaration to an element

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

Note

Complete the View the CSS for an element tutorial before doing this one.

  1. Open CSS Examples.
  2. Right-click the Add A Background Color To Me! text and select Inspect.
  3. Click element.style near the top of the Styles tab.
  4. Type background-color and press Enter.
  5. Type honeydew and press Enter. In the DOM Tree you should see that an inline style declaration was applied to the element.
Figure 3

The background-color:honeydew declaration has been applied to the element via the element.style section of the Styles tab
Adding a CSS declaration to the element via 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.

Note

Complete the View the CSS for an element tutorial before doing this one.

  1. Open CSS Examples.
  2. Right-click the Add A Class To Me! element and select Inspect.
  3. Click .cls. DevTools reveals a text box where you may add classes to the selected element.
  4. Type color_me in the Add new class text box and then press Enter. A checkbox appears below the Add new class text box, where you may toggle the class on and off. If the Add A Class To Me! element has any other classes applied to it, you are also able to toggle each from here.
Figure 4

The color_me class has been applied to the element via the .cls section of the Styles tab
Applying the color_me class to the element

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.

Note

Complete the View the CSS for an element tutorial before doing this one.

  1. Open CSS Examples.
  2. Hover over the Hover Over Me! text. The background color changes.
  3. Right-click the Hover Over Me! text and select Inspect.
  4. In the Styles tab, click :hov.
  5. Check the :hover checkbox. The background color changes like before, even though you are not actually hovering over the element.
Figure 5

Toggling the :hover pseudostate on an element
Toggling the 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.

Note

Complete the View the CSS for an element tutorial before doing this one.

  1. Open CSS Examples.

  2. Right-click the Change My Margin! element and select Inspect.

  3. In the Box Model diagram in the Styles tab, hover over padding. The padding of an element is highlighted in the viewport.

    Note

    Depending on the size of your DevTools window, you may need to scroll to the bottom of the Styles tab to see the Box Model.

  4. Double-click the left margin in the Box Model, which currently has a value of - meaning that the element does not have a left-margin.

  5. Type 100px and press Enter. The Box Model defaults to pixels, but it also accepts other values, such as 25%, or 10vw.

Figure 6

Hovering over the padding of the element
Hovering over the padding of the element

Figure 7

Changing the left-margin of the element
Changing the left-margin of the element

Note

Portions of this page are modifications based on work created and shared by Google and used according to terms described in the Creative Commons Attribution 4.0 International License.
The original page is found here and is authored by Kayce Basques (Technical Writer, Chrome DevTools & Lighthouse).

Creative Commons License
This work is licensed under a Creative Commons Attribution 4.0 International License.