Sometimes the WordPress Customizer doesn’t expose the setting you need. The theme uses a font size you want to change. A button’s hover color is off. You want to tweak the spacing on archive pages. The fix is small CSS — a few lines that override what the theme does. Done right, it’s harmless. Done wrong, it cascades into other broken things.

Short answer: Use Customizer → Additional CSS for most custom CSS. It persists across theme updates (but not theme switches). For more substantial customization, use a child theme. Be specific in selectors; don’t use !important unless necessary. Test on mobile. Verify changes don’t break other elements.
WordPress Customizer Additional CSS panel showing a live preview of a CSS change

Where to add custom CSS

1. Customizer → Additional CSS (easiest)

Appearance → Customize → Additional CSS.

Pros:

  • Survives parent theme updates.
  • Live preview as you type.
  • No code editing required.
  • Stored in WordPress database, attached to the active theme.

Cons:

  • Doesn’t carry over if you switch themes.
  • Can get unwieldy with hundreds of lines.

Best for: most custom CSS. 90% of bloggers should use this.

2. Child theme’s style.css

If you have a child theme, you can add CSS to its style.css file.

Pros:

  • Better for large amounts of CSS.
  • Version-controllable if you keep files in git.
  • Performance-wise, identical to Customizer CSS.

Cons:

  • Requires SFTP or file editing.
  • Still doesn’t carry over if you switch parent themes.

Best for: serious customization, multi-site management, or developers.

3. Plugin like Simple Custom CSS

Various plugins that add a CSS editor. Mostly redundant with Customizer; useful only if your theme lacks the Customizer option.

What NOT to do

  • Edit the parent theme’s style.css directly. Lost at next update.
  • Add inline styles to individual posts (works but doesn’t scale).

How CSS works (the 1-minute version)

CSS rules have three parts:

selector {
  property: value;
}

The selector targets HTML elements. Common ones:

  • p — all paragraphs.
  • .classname — elements with that class.
  • #idname — element with that ID.
  • h2.entry-title — h2 elements with class “entry-title.”
  • .site-header a — links inside the site header.

Properties define what changes (color, font-size, margin, etc.).

Finding the right selector

The hardest part of custom CSS. To find the selector for an element:

Browser DevTools

  1. Right-click the element on your live site → “Inspect” (or Cmd+Shift+I / Ctrl+Shift+I).
  2. The DevTools panel opens. The HTML for the element is highlighted.
  3. Look at its classes (the class="..." attribute).
  4. The CSS on the right shows what styles currently apply.

From there, you can identify what class to target.

Common WordPress classes

  • .entry-title — post title in archives and single posts.
  • .entry-content — the main post content area.
  • .site-header — the header.
  • .site-footer — the footer.
  • .widget — sidebar widgets.
  • .post-X — specific post by ID.
  • .category-Y — posts in a specific category.

Each theme adds its own classes. Inspect to find them.

Browser DevTools showing the HTML and CSS of a blog post element being inspected

The “specificity” issue

Sometimes you write CSS and it doesn’t take effect. Usually because a more specific rule overrides yours.

CSS specificity rules (simplified):

  • Inline styles > IDs > classes > elements.
  • More specific selectors win over less specific.
  • .site-header .menu-item a beats a.

To override, make your selector more specific. Add a parent class. Stack selectors.

The !important nuclear option

Adding !important to a property overrides everything:

.entry-title {
  color: #333 !important;
}

Use sparingly. Once you’ve used !important once, you may need to use it more often to override your own previous !importants. Cascading nightmare.

Prefer fixing specificity over reaching for !important.

Common customizations

Change a font

body {
  font-family: 'Inter', sans-serif;
}

Note: the font must be loaded. Customizer typography settings often handle this. For custom Google Fonts, use a plugin like OMGF or your theme’s font loader.

Adjust heading sizes

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }

Change link color

a {
  color: #d44;
}
a:hover {
  color: #b22;
}

Adjust spacing

.entry-content p {
  margin-bottom: 1.5em;
}

Hide an element

.site-info {
  display: none;
}

Use cautiously. Hiding elements without understanding why they exist can break things (e.g., hiding the comment form breaks discussions).

Mobile-only or desktop-only changes

/* Mobile only */
@media (max-width: 768px) {
  .sidebar { display: none; }
}

/* Desktop only */
@media (min-width: 769px) {
  .site-title { font-size: 3rem; }
}

How to write CSS that doesn’t break things

1. Be specific in selectors

Don’t use generic selectors that affect too many things.

Bad: div { padding: 20px; } — affects every div on the site.

Good: .entry-content { padding: 20px; } — only the post content area.

2. Test on multiple devices

After adding CSS, check:

  • Desktop.
  • Tablet width (using browser responsive mode).
  • Phone width.
  • Real phone if possible.

CSS that looks fine on desktop can break on mobile.

3. Test multiple page types

CSS affecting blog posts also affects archive pages, sometimes the homepage, sometimes single pages. Check each.

4. Don’t !important your way out of problems

If you need !important, you probably have a specificity issue. Fix the specificity instead.

5. Comment your CSS

For non-obvious changes, leave a comment:

/* Increase mobile body font for readability */
@media (max-width: 768px) {
  body { font-size: 17px; }
}

Future you will thank you.

The “I added CSS and now my site is broken” recovery

If Customizer Additional CSS is the culprit: open Customizer, delete the offending CSS, save.

If child theme style.css: revert your changes via SFTP.

If you’re not sure which CSS broke things: comment out your most recent additions one section at a time until the issue resolves.

Performance considerations

Custom CSS rarely affects performance meaningfully. A few hundred lines of CSS in Customizer loads fine.

If you have thousands of lines, consider:

  • Moving to a child theme’s style.css (slightly more efficient).
  • Auditing to remove unused rules.
  • Combining with the theme’s other CSS via a caching plugin.

Don’t optimize prematurely.

The honest summary

Customizer → Additional CSS is the right place for most blogger CSS. Be specific in selectors. Use browser DevTools to find the right classes to target. Test mobile and multiple page types after changes. Avoid !important when possible. Comment non-obvious code. If something breaks, comment out recent CSS until it works. Most CSS customizations are 5–10 lines; learn the basics once and you can tweak forever.