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

Adding custom CSS to a WordPress.com site using Appearance > Customize > CSS

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

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.

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

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.

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)

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

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/

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

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store