Adding custom CSS in WordPress is straightforward, but doing it the wrong way means losing your changes when you update your theme. There are four methods, each appropriate for a different situation. This guide covers all four so you can choose the one that survives theme updates and fits your workflow.
Method 1: The Customizer (Simplest)
Go to Appearance -> Customize -> Additional CSS. Type your CSS in the box. Changes preview in real time on the right side. Click Publish to save. This CSS is stored in the WordPress database, not in theme files, so it survives theme updates. The downside: the CSS applies to your entire site and cannot be conditioned to specific pages or post types.
Use the Customizer for small global tweaks: changing a link color, adjusting a font size, adding a margin to a specific element that appears site-wide. Do not use it for large amounts of CSS (above 5KB) – it slows down the Customizer preview and is hard to maintain.
Need help with your WordPress site? Describe your project and get a free estimate.
Method 2: Child Theme (Most Reliable)
A child theme is a separate theme that inherits from your parent theme. Its style.css file holds your custom CSS and is never overwritten by parent theme updates. If you are making significant CSS customisations, a child theme is the correct long-term approach.
Create a child theme folder in /wp-content/themes/your-theme-child/ with two files:
style.css:
/*
Theme Name: Your Theme Child
Template: your-theme-folder-name
*/
/* Your custom CSS here */
.site-header {
background: #f5f5f5;
}functions.php:
<?php
add_action('wp_enqueue_scripts', function() {
wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
});Activate the child theme in Appearance -> Themes. Your custom CSS now lives in a file that survives parent theme updates.
Method 3: A Plugin
Plugins like Simple Custom CSS or WP Add Custom CSS store custom styles in the database and output them on the front end. These work similarly to the Customizer but with a more comfortable code editor interface and sometimes per-page scoping. Use a plugin approach when you want a code editor with syntax highlighting and the ability to add CSS per specific page or post.
Method 4: Elementor Custom CSS (Page or Widget Level)
If you use Elementor, each section, column, and widget has a Custom CSS tab in its Advanced settings. CSS added here applies only to that specific element. This is the cleanest way to scope styles to specific page elements without global selectors that might unintentionally affect other pages.
In Elementor’s Custom CSS panel, use selector as a placeholder for the element’s generated class. For example: selector h2 { color: red; } targets only the H2 elements within that specific Elementor section.
Which Method to Use
Global theme tweaks that need to survive updates: child theme. Small global adjustments without creating a child theme: Customizer. Page-specific or element-specific styles in Elementor: Elementor Custom CSS. Styles managed by a non-developer who needs an interface: CSS plugin with editor.