How To Use Custom CSS With WordPress

One of the quickest ways to customize the appearance of your WordPress site is by using CSS. With CSS styling, you can edit your site’s appearance both globally and across specific pages. You can change colors, align elements, change sizes of media, change fonts, and customize how anything on your WordPress theme looks. To do this, you’ll want to learn how to create custom CSS in WordPress.

CSS stands for Cascading Style Sheets and is one of the most popular web languages next to HTML. Whereas HTML is used to lay the foundation of a website’s appearance, CSS is used to further style and fine-tune it.

There are a few recommended methods to add custom CSS to your WordPress site:

Method #1: Add Custom CSS Using the Theme Customizer

The WordPress Customizer allows you to add custom CSS to your website and preview the changes in real time. To access it, log in to your WordPress dashboard and then navigate to the Appearance > Customize menu. Then select the Additional CSS tab at the bottom.

You can add and adjust your custom CSS code here and preview it until you are satisfied with how it looks on your site.

Once done, click the Save & Publish'button near the top when you are finished.

Any custom CSS that is added with the theme customizer is only available with that particular theme. If you would like to use the CSS for other themes, then you will need to copy and paste the code into your new theme using the same method.

Method #2: Add Custom CSS Using a Plugin

If you want your custom CSS to be applied regardless of which WordPress theme you are using, without having to copy and paste your code to new themes, then this method may be best for you.

There’s a few plugins that will allow you to accomplish this such as SiteOrigin CSS, Custom CSS Pro, or Simple Custom CSS and JS.

Method #3: Add Custom CSS Using a Child Theme Stylesheet

This is a more advanced method and only recommended if you are looking to edit the existing CSS code of your theme instead of adding your own. For this method, you’ll need to create a WordPress child theme, which allows you to modify the parent theme without the risk of breaking your site live site or being overwritten by theme updates.

After creating a child theme, you can download the style.css file located in your parent theme and then upload it to the child theme directory using SFTP. You can find your parent theme and child theme folder by navigating to /htdocs/wp-content/themes using SFTP.

Once you’ve copied your theme’s style.css file into the child theme directory, you can edit the CSS code directly from that file.

IMPORTANT: Always remember to proceed carefully and make backups of your files before using this method.

Where To Learn More About Using CSS

There are plenty of free, useful guides online that will help you learn more about using CSS code and the most common elements that you can modify. If you are struggling to figure out which code that you need to make a certain change, a simple Google search will usually do the trick and lead you to the right answer.

Tips and Tricks For Editing CSS On Your Website

You can use your browser’s ‘Inspect’ tool by loading your website in a browser and then right clicking on the page, or the specific section of the page where you want to modify, and select “Inspect Element.”

This will open up a panel in your browser which shows all of the existing CSS styles on the page. This is a great trick to find the CSS classes that you can modify on your site. In this example, we’ve highlighted the Hello world! text

Based on this, we can observe that the class that controls the font size of the “Hello world!” title is called h2.entry-title and that the font size is set to 6.4rem.

If you wanted to change the font size to 7rem you would need to add this custom CSS code:

h2.entry-title {
font-size: 7rem !important;
}

NOTE: When adding custom CSS that overrides existing CSS, you’ll need to add the !important tag into each line that you are overriding

The first line in the snippet defines which element that you are altering. The following lines below (enclosed by the brackets) contain specific instructions on what should be changed.

This is just a basic example of how you can use your browser to locate and make changes using CSS styling. With more practice, you’ll be able to easily add and customize the CSS all over your site.