index.md

title	Get started viewing and changing CSS
description	Learn how to use Microsoft Edge DevTools to view and change the CSS of a page.
author	MSEdgeTeam
ms.author	msedgedevrel
ms.topic	conceptual
ms.prod	microsoft-edge
ms.date	05/04/2021

Get started viewing and changing CSS

Follow these interactive tutorial sections to learn the basics of viewing and changing the CSS for a page by using DevTools.

View the CSS for an element

1. Open the CSS Examples demo page in a new window or tab. To do this, right-click the link, or press and hold Ctrl (Windows, Linux) or Command (macOS) and then click the link.

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

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

   

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

4. On the page, in the Value of data-message: text box, enter the value.

5. Right-click the Inspect Me! text, and then select Inspect.

6. In DevTools, on the Elements tool, select the Styles panel. In the Styles panel, the Inspect Me! element is highlighted.

7. In the Inspect Me! element, find the aloha class rule. This rule is displayed, because it is being applied to the Inspect Me! element.

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

   

9. On the page, in the Value of padding: text box, enter the value.

Add a CSS declaration to an element

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

1. First, we recommend doing the View the CSS for an element tutorial section, above.

2. Open the CSS Examples demo page in a new window or tab.

3. Right-click the Add A Background Color To Me! text, and then select Inspect.

4. Click element.style near the top of the Styles panel.

5. Type background-color and then press Enter.

6. Type honeydew and then press Enter. In the DOM Tree, an inline style declaration applied to the element is displayed.

   The background-color:honeydew declaration is applied to the element using the element.style section of the Styles panel:

   

Add a CSS class to an element

To display how an element looks when a CSS class is applied to or removed from an element, see the Styles panel.

1. First, we recommend doing the View the CSS for an element tutorial section, above.

2. Open the CSS Examples demo page in a new window or tab.

3. Right-click the Add A Class To Me! text, and then select Inspect.

4. Click .cls. DevTools reveals a text box where you can add CSS classes to the page element that you're inspecting.

5. 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 can 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.

   The color_me class is applied to the element using the .cls section of the Styles panel:

   

Add a pseudostate to a class

Use the Styles panel to permanently apply a CSS pseudostate to an element. DevTools supports :active, :focus, :hover, and :visited.

1. First, we recommend doing the View the CSS for an element tutorial section, above.

2. Open the CSS Examples demo page in a new window or tab.

3. Hover on the Hover Over Me! text. The background color changes.

4. Right-click the Hover Over Me! text, and then select Inspect.

5. In the Styles panel, click :hov.

6. Select the :hover checkbox. The background color changes like before, even though you aren't actually hovering over the element.

   Here's the result of toggling the :hover pseudostate on an element:

   

Change the dimensions of an element

Use the Box Model interactive diagram in the Styles panel to change the width, height, padding, margin, or border length of an element.

1. First, we recommend doing the View the CSS for an element tutorial section, above.

2. Open the CSS Examples demo page in a new window or tab.

3. Right-click the Change My Margin! text, and then select Inspect.

4. In the Box Model diagram in the Styles panel, hover on padding. The element's padding is highlighted in the viewport.

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

5. Double-click the left margin in the Box Model, which currently has a value of -, meaning that the element doesn't have a margin-left.

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

   Hovering over the element's padding:

   

   Changing the element's left margin:

   

Debugging Media Queries

Media Queries are a way to make your website react to changes in the configuration settings for each user. The most significant use case is to provide your product a different CSS layout depending on the dimensions of the viewport.

Using separate layouts allows for a one-column layout for mobile devices and multi-column layouts when there is more screen estate available.

To debug or test the Media Queries you defined in your CSS:

1. Open DevTools. To do this, you can right-click in a webpage and then select Inspect.

2. Click the Toggle device emulation () button. Or, when DevTools has focus, press Ctrl+Shift+M (Cmd+Shift+M on macOS).

   

3. With the device toolbar open, click the ... menu on the top-right and then select Show media queries:

   

   The colored bars above the webpage represent the different media queries.

4. Hover on the boundaries in the bars to display the values of the different media queries. Click each media query value to resize the web page to match.

   

5. To debug media queries and open the CSS file in the Sources editor, right-click a bar segment and then select reveal in source code.

   

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

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