How to Add Custom CSS to WordPress (5 Methods)

The fastest way to add custom CSS to WordPress is through Appearance → Customize → Additional CSS in your WordPress admin. This built-in method works on every WordPress site, survives theme updates, and takes effect immediately. For larger CSS customisations that you want to manage in files rather than the database, a child theme’s style.css is the more maintainable approach.

Custom CSS lets you override your theme’s default styles — changing colours, fonts, spacing, layouts, visibility of elements, and responsive behaviour — without modifying theme files that would be overwritten during updates. Whether you want to change a button colour, hide an unwanted element, adjust mobile spacing, or restyle your navigation menu, custom CSS is the tool.

Method 1: WordPress Customizer (Easiest — Recommended for Small Changes)

WordPress includes a built-in CSS editor accessible through Appearance → Customize → Additional CSS. This is the fastest method and the one we recommend for most users making minor to moderate styling changes.

How to use it: Go to Appearance → Customize in your WordPress admin. Click “Additional CSS” in the left panel. Type or paste your CSS rules in the editor. The live preview on the right shows your changes in real time. When you are satisfied, click “Publish.”

Example: To change all H2 headings to blue, enter: h2 { color: #2563eb; }

Pros: Works on every WordPress site. No file access needed. Live preview shows changes before publishing. Survives theme updates (CSS is stored in the database, not in theme files). No plugins required.

Cons: For very large CSS additions (hundreds of lines), the editor becomes unwieldy. CSS is stored in the database, making it harder to version control or transfer between environments. All CSS loads on every page (no per-page targeting without media queries or body classes).

Best for: Quick styling tweaks — colour changes, font adjustments, spacing fixes, hiding unwanted elements, and minor layout modifications. If your CSS is under 50–100 lines, this method is perfectly appropriate.

Method 2: Child Theme style.css (Best for Large Customisations)

If you have significant CSS customisations — hundreds of lines or more — a child theme’s style.css file is the proper location. CSS in a file is easier to manage, version control, and transfer between environments than CSS in the database.

How to use it: Create a child theme if you do not already have one (follow our child theme creation guide). Open the child theme’s style.css file. Add your custom CSS after the theme header comment. Save and upload.

Pros: Clean separation of custom styles from theme styles. Easy to manage in a code editor. Version controllable with Git. Transferable between environments (just copy the file). No database dependency.

Cons: Requires creating a child theme (a one-time setup — see our guide). Requires FTP or file manager access to edit. No live preview while editing (unless you use a local development environment).

Best for: Sites with substantial CSS customisations. Developers and technically comfortable site owners. Sites using version control.

Method 3: CSS Plugin (Simple Code or WPCode)

CSS plugins like Simple Custom CSS and JS, WPCode (formerly Insert Headers and Footers), or Custom CSS Pro provide a dedicated admin interface for managing custom CSS without a child theme.

How to use it: Install your chosen plugin from Plugins → Add New. Navigate to the plugin’s CSS editor (typically in a new admin menu item). Enter your CSS. Save.

Pros: Easy to use. Some plugins support per-page CSS targeting (load specific CSS only on specific pages). Some support CSS minification. Does not require a child theme. Stored in the database with an admin interface for management.

Cons: Adds another plugin to your site (every plugin adds a small performance overhead and a maintenance requirement). Plugin dependency — if the plugin is deactivated, your CSS disappears. For most use cases, the built-in Customizer (Method 1) provides the same functionality without a plugin.

Best for: Sites where you want per-page CSS targeting, CSS organisation across multiple snippets, or a more feature-rich editor than the Customizer provides.

Method 4: Your Theme’s Built-In CSS Option

Many WordPress themes — particularly premium themes and page builder themes — include their own custom CSS editor in their theme options panel.

In Elementor, go to Elementor → Custom CSS (in the free version, custom CSS is available at the page level in Elementor Pro, or site-wide through the Customizer). In Divi, go to Divi Theme Options → General → Custom CSS. In Astra, GeneratePress, and other popular themes, check the theme’s documentation for the custom CSS location.

Pros: Integrated into your theme’s settings. Some themes offer SCSS support or CSS variables. Theme-specific CSS options may provide better context for theme-related overrides.

Cons: Theme-dependent — if you switch themes, your CSS does not transfer. The Customizer’s Additional CSS (Method 1) is theme-independent and generally more portable.

Best for: Users who prefer to keep all theme-related settings in one place. Minor overrides specific to the current theme.

Method 5: Enqueue CSS via functions.php (Developer Method)

For developers who want maximum control, you can enqueue a custom CSS file through your child theme’s functions.php. This is the most “correct” WordPress method from a development perspective.

How to use it: Create a CSS file in your child theme directory (e.g., custom.css). Add the following to your child theme’s functions.php:

function enqueue_custom_styles() {
  wp_enqueue_style('custom-styles', get_stylesheet_directory_uri() . '/custom.css', array(), '1.0.0');
}
add_action('wp_enqueue_scripts', 'enqueue_custom_styles');

Pros: Full control over load order (specify dependencies), versioning (cache busting), and conditional loading (load CSS only on specific pages using is_page() or similar conditionals). Follows WordPress coding standards. Works perfectly with version control and deployment workflows.

Cons: Requires PHP knowledge. Requires file access. Overkill for simple styling changes.

Best for: Developers building custom themes or managing complex sites. Sites where CSS needs to load conditionally on specific pages or post types.

How to Find the Right CSS Selector

To style a specific element, you need to know its CSS selector — the class name, ID, or element type that targets it. The easiest way to find this is with your browser’s Inspector tool.

In Chrome, right-click the element you want to style and select “Inspect” (or press F12). The Developer Tools panel opens with the element highlighted in the HTML structure. The right side shows the current CSS rules applied to that element. Note the element’s class names (e.g., .site-header, .entry-title, .woocommerce-Price-amount) — these are what you use in your custom CSS to target that specific element.

For example, if you inspect an H2 heading and see it has the class entry-title, you can target it specifically with .entry-title { color: #2563eb; font-size: 28px; }.

CSS Specificity — Why Your CSS Is Not Working

The most common reason custom CSS does not apply is a specificity problem. CSS rules with higher specificity override rules with lower specificity. Your theme’s CSS — which loads before your custom CSS — may use selectors with higher specificity than yours, meaning your custom rule is overridden.

Quick fix: Make your selector more specific. Instead of h2 { color: blue; }, try .entry-content h2 { color: blue; } or body .entry-content h2 { color: blue; }. Each additional class or element in the selector chain increases specificity.

Nuclear option: Add !important to force your rule to override: h2 { color: blue !important; }. This works but should be used sparingly — overusing !important makes CSS increasingly difficult to maintain and debug.

Frequently Asked Questions

Will my custom CSS slow down my site?

For reasonable amounts of CSS (under 50 KB — which is thousands of lines), the performance impact is negligible. CSS loads in the <head> and is render-blocking by default, but modern browsers parse CSS extremely quickly. If you are adding a few dozen rules, the performance impact is unmeasurable. For comprehensive speed optimization, see our WordPress speed guide.

Which method should I use?

For quick, small changes: Method 1 (Customizer). For substantial customisations: Method 2 (child theme). For developers with specific requirements: Method 5 (enqueue via functions.php). Methods 3 and 4 are alternatives for specific situations but are not necessary for most sites.

Can I add CSS that only applies to specific pages?

Yes. WordPress adds body classes that identify every page — for example, .page-id-42 for a specific page or .single-post for single blog posts. You can use these classes in your CSS selectors to target specific pages: .page-id-42 h1 { color: red; }. For programmatic conditional loading, Method 5 (functions.php enqueue) allows you to load CSS files only on specific pages using WordPress conditional tags.

My CSS changes are not showing up. What is wrong?

The most common causes are browser caching (clear your browser cache and reload — or use Ctrl+Shift+R for a hard refresh), a caching plugin serving an old cached version of the page (clear your caching plugin’s cache), CSS specificity (your theme’s CSS has higher specificity than your custom rule — see the Specificity section above), and a syntax error in your CSS (a missing semicolon, bracket, or quote can cause the entire rule block to be ignored). Check Chrome DevTools → Console for CSS parsing errors.

Need Expert Help? Let WP Ministry Handle It

CSS customisation is included in our website edits service for Pro care plans and above. Need a button restyled, a layout adjusted, or a responsive design issue fixed? Submit a request and our team handles it — typically within the same business day.

For larger design changes, our custom development and design services handle complete visual transformations.

View our care plans → or call (901) 249-0909.

Related Articles

How to Create a WordPress Child Theme (Step by Step)

How to Speed Up Your WordPress Site (Complete 2026 Guide)

How to Fix WordPress Plugin Conflicts (Troubleshooting Guide)