How to find your WordPress CSS styles

In website development, coding files generate the look of a website.

Among coding files, specific files form the structure of the pages, while others define the styles of elements on a page.

CSS or Cascading Style Sheet files define the style of a webpage. These files are responsible for making things look better in the Internet browsers.

In a WordPress site, you can find the style.css file in the Themes folder. The style.css file contains the CSS code snippets that affect the look of your site’s pages. If you need to change the look of your WordPress site, you may need to find the respective sections in the style.css file.

Before diving deep into finding CSS styles or sections, let’s proceed to know about the CSS.

What is CSS?

CSS or Cascading Style Sheets is the language that defines the style of HTML documents. For elements on the pages, you can create CSS styles that define the position, structure, and presentation of the elements. An example of the CSS styles would be:

button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}

In Content Management Systems like WordPress, the css styles are controlled by theme files. That means you don’t have to code styles separately.

On the other hand, in manual website development, you may need to create styles separately.

WordPress and CSS

Once you configure WordPress and proceed to install your theme, you don’t have to deal with css.

Every WordPress theme contains its style.css file. You can find one in the /wp-content/themes/themename/ folder.

The css file in a WordPress theme defines the style, structure, and colors of a WordPress website. However, if you want to change the code snippets in the styles, you will need to alter css via the WordPress Dashboard.

Step 1
Login to WordPress dashboard and proceed to click on Editor in the Appearance menu.

wordpress css editor

Step 2
The next page shows your theme’s style.css file, along with an editor that lets you edit the css code.

wordpress css

Step 3
On the same page, you can see a list of your theme’s code files. If you need to alter a file, you can click on the one you like and edit the code in the Editor.

Step 4
After you make necessary changes in the css, click on Update File at the end to save changes.

Backup your style.css file

You can use multiple ways to backup your WordPress’ style.css file. As a beginner, you can go for the following methods.

Copy the code from WordPress code editor

Step 1
Login to WordPress dashboard and proceed to click on the Editor under the Appearance menu.

Step 2
Next, proceed to copy the code from Editor window. When pasting the code in a simple text file, make sure you save the file as a .css format.

wordpress save

Download the style.css file from your hosting file manager

Step 1
You can also download your style.css file from the Hosting account. To get started, you need to log into your Hosting account.

Step 2
After logging into the hosting control panel, look for the File Manager, where you can browse the files hosted on your account.

Step 3
In File Manager, browse to public_html directory. Here, you can see your WordPress installation core files.

wordpress hosting

Step 4
In the list, browse to /wp-content/themes/yourthemename/ directory, and you will see the style.css file.

Step 5
Now, right click on the style.css and choose Download from the short menu.

download wordpress style.css file

Finding the CSS styles

In the WordPress dashboard editor, you can see your site’s style.css file for making changes.

1. Basic information about your WordPress theme
At the top of the style.css, you can see the basic information for your WordPress theme. This section outlines the theme name, version, author, description, home page URL, license, and copyright text.

wordpress theme basic information in style.css file

2. Primary sections in a WordPress theme’s CSS file
Next, you can see the basic sections (styles) or code structure names of your WordPress theme.

wordpress style.css basic sections

3. Finding the code snippets in the WordPress CSS file
Once you get the full list of styles in the WordPress theme, use CTRL+F to find different sections in the code. The main sections also contain sub-sections of the CSS code.

wordpress css code snippets

4. Finding CSS styles with the Chrome’s inspect feature
Alternatively, you can browse to the home page of your site. Right click on the section you want to change the css code for, and click on the Inspect in the short menu.

wordpress chrome inspect feature

After clicking the Inspect option, you will see your browser screen has been divided into two sections.

5. Finding the names of CSS styles on a page
At the top of the right section, click on the arrow symbol and point at the different parts on the pages. As you point at the various parts on the page, you can see the respective css class or section name in the tooltip.

wordpress css class names

6. Edit the style.css file
Now, get back to the style.css code in the WordPress editor. Search for the respective class or section in the code and make necessary changes. After you make changes, you can save the file and proceed to see the changes on the site.

wordpress css styles

Purpose of the primary sections in the WordPress style.css file

The following list contains essential sections in a WordPress style.css file.

  • Typography: This section includes configuration on your site’s font styles, size, and colors.
  • Header: The top section of your WordPress site is referred to as the Header. Usually, it contains the menu bar and logo.
  • Posts: This section controls the way your site’s titles, fonts, colors, and their size information are displayed.
  • Sidebar: The css section that holds information about your site’s sidebar. You can change the code to make necessary changes to your site’s sidebar.
  • Footer: This is the bottom section of your WordPress site. It contains the footer links, social icons, legal pages, and copyright text.

We defined primary sections of the WordPress’ style.css file. As a beginner, you can search for the desired sections in the file and make necessary changes.

Additional places to use CSS in a WordPress website

You can also use the WordPress Additional CSS option to make necessary changes to your WordPress website.

Point at the Appearance in the left panel and click on Customize in the short menu.

wordpress css styles visual composer blog

On the next page, you can see the Additional CSS option.

Paste in the css code and save changes. You can see the results in the live customizer.

wordpress additional custom css

Precautions when editing the WordPress style.css file

  • Before you proceed to edit your WordPress’ style.css file, make sure to back it up first.
  • While editing the style.css file, take proper notes of the sections you edit, including opening and closing brackets and results in the browser.
  • It is recommended to edit your style.css file locally on your computer. For this, you may need to install a local server on your computer and make necessary changes to your site. Once you finalize your site’s style.css file, you can upload the updated style.css file to your hosting account.
  • Use Chrome’s Inspect option to find the exact style sections on the web pages. Once you identify the sections, you can search your site’s style.css file for the sections and make necessary changes.

Conclusion

If you focus on the style.css file, you can get a list of your site’s theme css styles.

With that in hand, the Chrome’s Inspect feature helps you find the style sections on your site’s pages. Proceed and make necessary changes, and see the results on the spot.

If for example, you don’t prefer editing the style.css file, you can choose your favorite theme while building your WordPress site. Your favorite theme will provide the way you want to show your site’s content on the pages.

Let’s learn more about how to code as a beginner. You can also join the conversation in the comments, and let us know about your thoughts on dealing with the WordPress css styles.

More on wpcrib

1 comment

  1. Can you comment on WordPress 5.0 and what you are doing to update your plugin to work with Gutenberg?

Add comment

Join discussion and make an impact. Your email address will not be published.

GDPR is going into effect on May 25, 2018. Learn more in our new GDPR section. You can also view changes to our Privacy Policy.
We use cookies to provide a personalised experience for our users.