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

1) 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.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

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)

Avada

Divi

The7

4) Page Builder Settings (Page Specific Styles)

Gutenberg Editor

Select a Block, then go to Advanced

Avada Fusion Builder

Divi Builder

Elementor (Pro Version)

WP Bakery

5) Inline Code (CSS inserted together with HTML)

Example of Inline CSS

Gutenberg Editor

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

Classic Editor or Classic Editor Style Editor Interface

WordPress Text Mode Editor
WordPress Text Mode Editor
Inserting HTML and CSS together in the Text tab.
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?

Recommended Reading & Watching

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