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.
- WP Admin > Appearance > Customize > Additional CSS
- Child theme’s style.css file
- Theme options (Avada, Divi, & The7)
- Page builder settings (Gutenberg, Avada, Divi, Elementor, & WP Bakery)
- 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.
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.
3) Theme Options (Avada, Divi, & The7)
These theme options are for global CSS (i.e., site wide styling).
4) Page Builder Settings (Page Specific Styles)
One cool thing about Gutenberg is that you can add CSS class names to blocks.
Create or select a block > Advanced
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.
In the settings popup modal for modules, rows, and sections, look for the Advanced Tab.
Elementor (Pro Version)
Edit the element > Advanced > Custom CSS
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>
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
Inline CSS can be inserted using special code elements/modules like ones found in Avada’s Fusion Builder or the Divi Builder.
Leave me a comment :-)
Recommended Reading & Watching
- HTML & CSS - The Very Basics https://css-tricks.com/video-screencasts/58-html-css-the-very-basics/
- Learning to Style HTML using CSS https://developer.mozilla.org/en-US/docs/Learn/CSS
- WordPress.com’s How to Add Custom CSS https://en.support.wordpress.com/custom-design/editing-css/
- How to Apply Custom CSS in Avada’s Fusion Builder https://theme-fusion.com/documentation/avada/how-to/how-to-apply-custom-css/
- Firefox Developer Tools https://developer.mozilla.org/en-US/docs/Tools
- Chrome DevTools https://developers.google.com/web/tools/chrome-devtools/