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

mark l chaves
Oct 19, 2019 · 4 min read
Adding custom CSS to a WordPress.com site using Appearance > Customize > CSS
Adding custom CSS to a WordPress.com site using Appearance > Customize > CSS

Five Methods Covered

We’ll cover these five ways to add CSS to a WordPress site.

  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 can contain page specific CSS selectors as well.

Adding custom CSS to a WordPress.org site using Appearance > Customize > Additional CSS
Adding custom CSS to a WordPress.org site using Appearance > Customize > Additional CSS
WP Admin > Appearance > Customize > Additional CSS
Adding custom CSS to a WordPress.org site using Appearance > Customize > Additional CSS
Adding custom CSS to a WordPress.org site using Appearance > Customize > Additional CSS
WP Admin > Appearance > Customize > Additional CSS
Adding custom CSS to a WordPress.com site using Appearance > Customize > CSS
Adding custom CSS to a WordPress.com site using Appearance > Customize > CSS
For WordPress.com WP Admin > Appearance > Customize > CSS

2) Child theme’s style.css file

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. Alternatively use FTP or cPanel File Manager if the Theme Editor is not available.

Locating a WordPress Child Theme style.css file
Locating a WordPress Child Theme style.css file
Child theme’s style.css file
Locating a WordPress Child Theme style.css file
Locating a WordPress Child Theme style.css file
Child theme’s style.css file

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

Another option for global styling CSS.

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

CSS class names can be added 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. 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

Editing HTML in a Gutenberg Block
Editing HTML in a Gutenberg Block

Classic Editor or Classic Editor Style Editor Interface

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

WordPress Text Mode Editor
WordPress Text Mode Editor
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 Fusion Builder Code Element
Avada Fusion Builder Code Element
Avada’s Fusion Builder Code Block Element
Divi Builder Code Module
Divi Builder Code Module
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/
mark l chaves

Written by

I slung code for Fortune 500 companies in a previous life. Now, I write and make some photographs. I’ve moved on to CaughtMyEye.dev and Dev.to. Follow me there.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade