Fix: Theme CSS Not Applying

Browser cache (most common)

Your browser is holding the old CSS. This is the #1 cause — always rule it out first.

# Hard refresh (bypasses cache)
Windows/Linux: Ctrl + Shift + R
macOS:         Cmd + Shift + R

# Or open DevTools → Network → check "Disable cache"

Caching plugin or CDN

WordPress caches CSS at multiple layers. If you have any of these, they need purging:

• WP Rocket, W3 Total Cache, LiteSpeed Cache, WP Super Cache — purge all caches
• Cloudflare, BunnyCDN, Fastly — purge the CDN cache separately
• Host-level caching (Kinsta, WP Engine) — click "Clear cache" in the host dashboard
• CSS minification/combination plugins — disable temporarily to test

# WordPress Admin bar → Purge All Caches
# Cloudflare → Caching → Purge Everything
# Then hard refresh the page

CSS specificity — something else overrides it

Your CSS is loading but a more specific rule is winning. DevTools shows this clearly — your rule appears with a strikethrough.

/* ❌ Loses to a more specific selector */
.button { color: red; }

/* A theme rule with higher specificity wins: */
.theme-dark .container .button.primary {
  color: blue;
}

/* ✅ Fix: match or increase specificity */
.theme-dark .container .button.primary {
  color: red;
}

/* ✅ Or use !important (last resort) */
.button { color: red !important; }

Wrong file — you edited the parent theme

If you're using a child theme, editing the parent theme's style.css does nothing. The child theme's style.css is what loads.

wp-content/themes/
├── parent-theme/
│   └── style.css           ← ❌ Ignored if child exists
└── parent-theme-child/
    └── style.css           ← ✅ Edit this one

# Also check the child theme has this at the top:
/*
Template: parent-theme
*/

Block theme (FSE) — style.css isn't used

Block themes (Twenty Twenty-Four, Twenty Twenty-Five, and many modern themes) work differently. The style.css file is often ignored in favor of theme.json and block-level styles.

# In a block theme, use one of these instead:

# 1. Site Editor → Styles → Additional CSS
#    (wp-admin → Appearance → Editor → Styles)

# 2. theme.json for global styles
{
  "version": 2,
  "styles": {
    "color": {
      "text": "#e2e8f0"
    }
  }
}

# 3. Per-block style panel in the block editor