Design

How to Find Your Theme’s CSS

This feature is available on sites with our WordPress.com Pro plan. If your site has one of our legacy plans, this feature is available on Premium, Business, and eCommerce.

You can add CSS to customize your site’s theme. The theme’s original CSS can be found by using your browser’s web inspector tools.

Table of Contents


What is CSS?

CSS stands for Cascading Style Sheets. It is used to define colors, fonts, padding, and other default styles of a site’s theme. You can click here to learn more.

↑ Table of Contents ↑

Before you Start

The Block Editor offers a lot of functionality for changing the background color of different blocks, font sizes, and line spacing. Check to make sure the customization option isn’t built into the Block Editor.

↑ Table of Contents ↑

Web Inspector Basics

What is Web Inspector?

The Web Inspector is built into all modern browsers. The Web Inspector allows you to to see the exact CSS used to style different HTML elements.

These three basic steps will work in most current browsers to open the web inspector. If you’re using Safari or Microsoft Edge, you may need to activate the feature before you can use it.

In Safari:

  1. Go to Preferences and click on Advanced.
  2. Check the Show Develop menu in menu bar checkbox.

In Microsoft Edge:

  1. Enter about:flags in your Edge address bar.
  2. Check the box to Enable View mode and Inspect Element.

The Web Inspector is enabled by default in Google Chrome.

To launch the Web Inspector:
  1. Right-click on a web page element (like text or an image)
  2. Select the “Inspect Element” option
  3. Look for a panel at the bottom or side of the screen

The panel will show the HTML for the element you clicked as well as all the CSS that applies to it. You can click on different HTML elements in the panel and then look at the CSS on the right to figure out what CSS can be copied.

To add the copied code, go to My Sites → Appearance → Customize → Additional CSS to make design customizations on CSS.

Here are some video walkthroughs showing how the web inspector works for each major browser:


↑ Table of Contents ↑

Chrome

For more info, check the Chrome DevTools guide.


↑ Table of Contents ↑

Firefox

For more info, check the Firefox Style Editor guide.


↑ Table of Contents ↑

Safari

For more info, check the Safari Developer Tools guide.

Not quite what you're looking for?

Get Help