How to Add Custom CSS to WordPress

Custom CSS is one of the simplest ways to change the appearance of a WordPress website without rebuilding the entire theme. With a few lines of CSS, you can adjust colors, fonts, spacing, buttons, layouts, borders, and many other visual elements.

WordPress provides several ways to add custom CSS, and the best method depends on the type of theme you are using and how extensive your customization needs are.

This guide explains the different methods and shows how to add custom CSS safely.

What Is Custom CSS?

CSS, or Cascading Style Sheets, controls the visual presentation of a website.

HTML defines the structure of a page, while CSS controls how that structure looks.

For example, this CSS changes the color of a heading:

h1 {
    color: #222222;
}

You can use custom CSS to modify things such as:

• Font sizes
• Text colors
• Background colors
• Buttons
• Margins and padding
• Borders
• Images
• Navigation menus
• Headers and footers
• Page layouts
• Mobile styling

---

Why Add Custom CSS to WordPress?

Custom CSS is useful when the default theme settings don’t provide enough control.

For example, you might want to:

• Change the color of a button
• Increase the size of a heading
• Adjust spacing between sections
• Hide a particular element
• Customize a navigation menu
• Change the appearance of blog posts
• Improve mobile styling
• Match the website with your brand colors

The advantage is that many visual changes can be made without modifying the theme’s core files.

---

Method 1: Add CSS Using the WordPress Customizer

For many classic WordPress themes, the Customizer provides an easy way to add CSS.

Step 1: Open the Customizer

Log in to your WordPress dashboard and go to:

Appearance → Customize

Look for:

Additional CSS

Depending on the theme and WordPress setup, the exact menu may vary.

Step 2: Open Additional CSS

Click Additional CSS.

You’ll see a code editor where you can enter your custom styles.

Step 3: Add Your CSS

For example:

.site-title {
    color: #1e73be;
}

Step 4: Preview the Changes

WordPress normally displays a live preview of your changes.

Check the website to make sure the CSS produces the desired result.

Step 5: Publish

When you’re satisfied, click Publish.

Your custom CSS will then be applied to the website.

---

Method 2: Add CSS Using the Site Editor

If you’re using a modern block theme, you may not see the traditional Customizer.

Instead, WordPress provides the Site Editor.

Go to:

Appearance → Editor

Depending on your WordPress version and theme, you can access styling options through the Styles section.

The Site Editor allows you to control many design settings without manually writing CSS.

For example, you can modify:

• Typography
• Colors
• Layout
• Spacing
• Block styles
• Global design settings

For simple visual changes, using the built-in style controls can be preferable to adding custom CSS.

---

Method 3: Add CSS Through a Child Theme

If you’re making extensive theme customizations, a child theme can be a better approach.

Create a child theme and add your CSS to its:

style.css

For example:

body {
    background-color: #f5f5f5;
}

h1 {
    font-size: 36px;
}

.button {
    border-radius: 6px;
}

A child theme helps keep your customizations separate from the parent theme.

This is particularly useful when you expect to update the parent theme regularly.

---

Method 4: Enqueue a Separate CSS File

For larger projects, you can create a separate stylesheet and load it through WordPress.

For example:

wp-content/
└── themes/
    └── my-child-theme/
        ├── style.css
        └── custom.css

Then enqueue the stylesheet from functions.php:

function my_custom_styles() {
    wp_enqueue_style(
        'custom-css',
        get_stylesheet_directory_uri() . '/custom.css',
        array(),
        '1.0'
    );
}

add_action('wp_enqueue_scripts', 'my_custom_styles');

This approach keeps larger CSS projects organized.

---

How to Find the CSS Selector You Need

One of the biggest challenges when adding custom CSS is identifying the correct element.

Modern browsers include developer tools that can help.

In Google Chrome

1. Open your website.
2. Right-click the element you want to change.
3. Select Inspect.
4. Look at the HTML in the Developer Tools panel.
5. Identify the class or ID associated with the element.

For example, you might find:

<h2 class="page-title">My Services</h2>

The class is:

page-title

You can target it with:

.page-title {
    color: #333;
    font-size: 32px;
}

A class selector starts with a period:

.page-title

An ID selector starts with #:

#header

---

Example: Change Heading Color

Suppose you want all H2 headings to be blue.

Use:

h2 {
    color: #1e73be;
}

If you only want a particular heading class to change:

.page-title {
    color: #1e73be;
}

Using a more specific selector is often safer when you don’t want to affect every heading on the website.

---

Example: Change Button Appearance

You can customize buttons with CSS:

.wp-block-button__link {
    background-color: #222;
    color: #fff;
    border-radius: 8px;
    padding: 12px 24px;
}

You can also add a hover effect:

.wp-block-button__link:hover {
    opacity: 0.85;
}

---

Example: Change Website Background

To change the overall page background:

body {
    background-color: #f7f7f7;
}

Be careful with global selectors such as body, because they can affect the entire website.

---

Example: Hide an Element

If you need to hide an element:

.example-element {
    display: none;
}

However, hiding an element with CSS doesn’t necessarily remove it from the page’s HTML or improve performance. Use this technique only when appropriate.

---

Example: Change Font Size

To increase the size of a heading:

h1 {
    font-size: 42px;
}

For responsive websites, you can use relative units such as rem:

h1 {
    font-size: 2.5rem;
}

---

Example: Add Responsive CSS

You can use media queries to change styles on smaller screens.

@media (max-width: 768px) {
    h1 {
        font-size: 30px;
    }

    .container {
        padding: 15px;
    }
}

This allows you to create different styles for mobile devices.

---

Understanding CSS Specificity

Sometimes you add CSS but nothing changes.

One common reason is CSS specificity.

For example, your theme might have:

.site-header .menu a {
    color: black;
}

while your custom CSS contains:

a {
    color: red;
}

The theme’s more specific selector may take precedence.

You could make your selector more specific:

.site-header .menu a {
    color: red;
}

Avoid using !important unless necessary.

For example:

color: red !important;

Although it can force a style to apply, excessive use of !important can make your stylesheet difficult to maintain.

---

How to Clear CSS Cache

Sometimes your CSS is correct but the website still displays the old design.

This can happen because of caching.

Try clearing:

• Browser cache
• WordPress caching plugin cache
• Server cache
• CDN cache

Then reload the page.

You can also use a hard refresh in your browser.

---

Common Mistakes When Adding Custom CSS

1. Using the Wrong Selector

If the selector doesn’t match the element, your CSS won’t have any effect.

Use browser Developer Tools to identify the correct class or ID.

2. Missing Brackets

Incorrect:

h1 {
    color: red;

Correct:

h1 {
    color: red;
}

3. Missing Semicolons

Although CSS can sometimes tolerate certain omissions, it’s best practice to terminate declarations properly:

h1 {
    color: red;
    font-size: 36px;
}

4. Changing Theme Files Directly

Avoid placing custom CSS directly into a parent theme’s files if the theme will be updated.

An update can overwrite your changes.

5. Ignoring Mobile Devices

A style that looks good on a desktop may not work well on smaller screens.

Always test custom CSS on:

• Desktop
• Tablet
• Mobile

---

Custom CSS vs Child Theme

These approaches serve different purposes.

Feature	Custom CSS	Child Theme
Simple visual changes	Excellent	Possible
PHP customization	No	Yes
Template modifications	No	Yes
CSS customization	Yes	Yes
Easy to implement	Yes	Moderate
Suitable for large customizations	Limited	Better
Protects template changes	No	Yes

If you only need a few visual adjustments, Additional CSS may be enough.

If you’re modifying PHP, templates, or adding substantial functionality, consider using a child theme.

---

Best Practices for WordPress Custom CSS

Follow these practices when maintaining custom styles:

1. Use clear and descriptive selectors.
2. Keep your CSS organized.
3. Avoid unnecessary !important declarations.
4. Test changes on mobile devices.
5. Back up your website before major customizations.
6. Use a child theme for extensive theme modifications.
7. Remove unused CSS periodically.
8. Check your styles after updating the theme.
9. Use browser Developer Tools when troubleshooting.
10. Keep related CSS rules together.

---

Final Thoughts

Adding custom CSS to WordPress is a simple and flexible way to personalize a website. For small changes, the Additional CSS area or built-in Site Editor controls may be sufficient. For larger projects involving templates, PHP, JavaScript, and extensive styling, a child theme provides a more structured approach.

Before adding CSS, identify the correct selector, make a small change, test it across different screen sizes, and keep your custom code organized. This approach will make your WordPress website easier to maintain as it grows.