How do I view CSS in browser?

Let’s take a look at how to do it in different browsers. Although note the date of this blog post. This stuff tends to change over time, so if anything here is wrong, let us know and we can update it.

In Firefox…

It’s a little button in DevTools. So easy!

1. Open DevTools (Command+Option+i)
2. Go to the “Inspector” tab
3. Click the little page icon

In Chrome and Edge…

It’s a little weirder, I think, but it’s still a fairly easy thing to do in DevTools.

• Open DevTools (Command+Option+i)
• If you don’t have the weird-special-bottom-area-thing, press the Escape key
• Click the menu icon to choose tabs to open
• Select the “Rendering” tab
• Scroll to bottom of the “Rendering” tab options
• Choose print from the options for Emulate CSS media

In Safari…

Safari has a little button a lot like Firefox, but it looks different.

1. Open DevTools (Command+Option+i)
2. Go to the “Inspector” tab
3. Click the little page icon

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

View an element's CSS

1. Right-click the Inspect me! text below and select Inspect. The Elements panel of DevTools opens.

   Inspect me!

2. Observe the Inspect me! element highlighted in blue the DOM Tree.

   

3. In the DOM Tree, find the value of the data-message attribute for the Inspect me! element.

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

5. In the Elements > Styles pane, find the aloha class rule.

   The Styles pane lists the CSS rules being applied to whatever element is currently selected in the DOM Tree, which should still be the Inspect me! element.

6. The aloha class is declaring a value for padding. 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, see .

Add a CSS declaration to an element

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

1. Right-click the Add a background color to me! text below and select Inspect.

   Add a background color to me!

2. Click element.style near the top of the Styles pane.

3. Type Inspect me!0 and press Enter.

4. Type Inspect me!1 and press Enter. In the DOM tree, you can see that an inline style declaration was applied to the element.

Add a CSS class to an element

Use the Styles pane to see how an element looks when a CSS class is applied to or removed from an element.

1. Right-click the Inspect me!2 element below and select Inspect.

   Add a class to me!

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

3. Type Inspect me!3 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 Inspect me!2 element had any other classes applied to it, you'd also be able to toggle them from here.

Add a pseudostate to a class

Use the Styles pane to permanently apply a CSS pseudostate to an element. DevTools supports Inspect me!5, Inspect me!6, Inspect me!7, Inspect me!8, and others.

1. Hover over the Inspect me!9 text below. The background color changes.

   Hover over me!

2. Right-click the Inspect me!9 text and select Inspect.

3. In the Styles pane, click :hov.

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

Change the dimensions of an element

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

1. Right-click the data-message1 element below and select Inspect.

   Change my margin!

2. To see the Box Model, click the

   
   Show sidebar button in the action bar on the Styles pane.
   

3. In the Box Model diagram in the Styles pane, hover over padding. The element's padding is highlighted in the viewport.

   

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

5. Type data-message4 and press Enter.

   

The Box Model defaults to pixels, but it also accepts other values, such as data-message5, or data-message6.

How do I view CSS files in my browser?

How do I view CSS in Chrome?

How do I enable CSS on my browser?

How do I preview CSS code?