Adding Custom CSS to your WordPress Website How-to Guide (no plugins)

Five Methods Covered

We’ll cover these 5 ways to add CSS to a WordPress site. No plugins are required.

1. WP Admin > Appearance > Customize > Additional CSS
2. Child theme’s style.css file
3. Theme options (Avada, Divi, & The7)
4. Page builder settings (Gutenberg, Avada, Divi, Elementor, & WP Bakery)
5. Inline code (Gutenberg, Classic Editor, Avada, & Divi)

1) WP Admin > Appearance > Customize > Additional CSS

This area is mainly for global (site-wide) styling, but it can contain page specific CSS selectors as well.

Log into your WP Admin dashboard. Navigate to Appearance > Customize > Additional CSS. Enter your custom CSS. Hit the Publish button to save and go live.

WP Admin > Appearance > Customize > Additional CSS

WP Admin > Appearance > Customize > Additional CSS

For WordPress.com WP Admin > Appearance > Customize > CSS

2) Child theme’s style.css file

The style.css file is also mainly for global styling. The big difference here is that this is a real physical file. The style.css should always live in the child theme’s folder/directory.

Sometimes the Theme Editor is not available due to security restrictions. Alternatively, use SFTP or the cPanel File Manager if your Theme Editor is not an option.

When using the Theme Editor, make sure style.css is selected on the right-hand side. Enter your custom CSS under the header comments. Hit the Update File button to save and go live.

Child theme’s style.css file

Child theme’s style.css file

3) Theme Options (Avada, Divi, & The7)

These theme options are for global CSS (i.e., site wide styling).

Avada

WP Admin > Avada > Theme Options > Custom CSS

Divi

WP Admin > Divi > Theme Options > Custom CSS

The7

WP Admin Toolbar > Theme Options > Advanced > Custom CSS

4) Page Builder Settings (Page Specific Styles)

Gutenberg Editor

One cool thing about Gutenberg is that you can add CSS class names to blocks.

Create or select a block > Advanced

Select a Block, then go to Advanced

Here’s a full example of how I add CSS to Gutenberg.

Avada Fusion Builder

Fusion Builder containers and elements have fields for CSS class names and CSS IDs.

Page specific CSS is added via the </> icon on the top toolbar.

Divi Builder

In the settings popup modal for modules, rows, and sections, look for the Advanced Tab.

Elementor (Pro Version)

Edit the element > Advanced > Custom CSS

WP Bakery

Page Settings (gear icon) > Custom CSS Settings

Global CSS can be set under WP Admin > Settings > Visual Composer > Custom CSS (tab)

5) Inline Code (CSS inserted together with HTML)

Example of Inline CSS

Inlining CSS with HTML is not considered “best practice”. But, sometimes it’s necessary for performance and dynamic styling. And, there’s AMP. AMP only allows inline CSS.

<h1 style=”font-family: Arial; text-align: center;”>Option 1</h1>

https://codepen.io/marklchaves/pen/BbOMeq

Gutenberg Editor

Create or select a block > More Options (vertical ellipses) > Edit as HTML

Classic Editor or Classic Editor Style Editor Interface

Create or select a text element > Click on the Text tab

Inserting HTML and CSS together in the Text tab.

Inline CSS can be inserted using special code elements/modules like ones found in Avada’s Fusion Builder or the Divi Builder.

Avada’s Fusion Builder Code Block Element

Divi Builder’s Code Module

Questions?

Leave me a comment :-)

Recommended Reading & Watching

1. HTML & CSS - The Very Basics https://css-tricks.com/video-screencasts/58-html-css-the-very-basics/
2. Learning to Style HTML using CSS https://developer.mozilla.org/en-US/docs/Learn/CSS
3. WordPress.com’s How to Add Custom CSS https://en.support.wordpress.com/custom-design/editing-css/
4. How to Apply Custom CSS in Avada’s Fusion Builder https://theme-fusion.com/documentation/avada/how-to/how-to-apply-custom-css/
5. Firefox Developer Tools https://developer.mozilla.org/en-US/docs/Tools
6. Chrome DevTools https://developers.google.com/web/tools/chrome-devtools/