How to Edit CSS in WordPress

Want to change button colors, tweak spacing, or fix a stubborn layout? Good news: you don’t need to rebuild your theme. In this guide, you’ll learn exactly how to edit CSS in WordPress—from the fastest “no-plugin” method to pro-level workflows—without breaking your site.

TL;DR – Pick Your Method

• Fastest (no plugin): Appearance → Customize → Additional CSS (for classic themes).
• Block themes (Site Editor): Appearance → Editor → Styles (for tokens) + a Custom CSS area (if your theme/plugins add it) or use a lightweight Custom CSS plugin.
• Update-proof: Child theme with /style.css (recommended for ongoing work).
• Per-page or per-widget: Your page builder’s custom CSS (e.g., Elementor’s Advanced → Custom CSS).
• Never do this: Edit parent theme files directly.

Before You Start (2 Minutes)

1. Back up your site (or use staging).
2. Open DevTools: Right-click → Inspect (Chrome/Edge/Firefox).
3. Know caches: If you use a caching or CDN plugin, you’ll need to purge cache to see changes.
4. Have a plan: Write small, test often.

Method 1 — Additional CSS (Fastest, No Plugin)

Best for: quick tweaks, testing selectors, small style changes.

1. In WordPress admin, go to Appearance → Customize → Additional CSS.
2. Paste your CSS and watch the live preview.
3. Click Publish.

Example tweaks:

/* Make site title larger */
.site-title a { font-size: 2rem; text-decoration: none; }

/* Style primary buttons */
.wp-block-button__link,
.button,
.button-primary { padding: .8rem 1.2rem; border-radius: .5rem; }

/* Reduce post content width on big screens */
@media (min-width: 1200px) {
  .entry-content, .wp-block-post-content { max-width: 720px; margin: 0 auto; }
}
Code language: CSS (css)

⚠️ Note: On some block themes, the Customizer may not show. Use Method 2 or 3.

Method 2 — Block Themes (Site Editor)

Best for: sites using Full Site Editing (FSE) / the Site Editor.

1. Go to Appearance → Editor (Site Editor).
2. Use Styles to change colors, fonts, spacing globally (no CSS required).
3. For custom rules that Styles can’t do, add CSS via a Custom CSS plugin (see Method 3) or your child theme (Method 4).

Pro tip: Block markup uses predictable classes like .wp-block-button__link, .wp-block-image img, .wp-block-columns. Target these in your CSS for reliable results.

Method 3 — Custom CSS Plugin (Simple & Theme-Switch Proof)

Best for: block themes without Additional CSS, or when you want rules that persist across theme switches.

1. Install a lightweight “Custom CSS” plugin (search “custom css” in Plugins → Add New).
2. Add your styles in the plugin’s CSS editor and Save.
3. Purge cache if you use a caching/CDN plugin.

Method 4 — Child Theme (Professional, Update-Proof)

Best for: ongoing work, version control, multiple files, clean organization.

1. Create a child theme with /style.css and functions.php.
2. Enqueue the stylesheet in your child theme: <?php // functions.php in child theme add_action('wp_enqueue_scripts', function () { wp_enqueue_style('child-style', get_stylesheet_uri(), [], wp_get_theme()->get('Version')); });
3. Put your CSS in /wp-content/themes/your-child-theme/style.css.
4. Activate the child theme: Appearance → Themes.

Why this rocks: Parent theme updates won’t overwrite your changes. You can also organize partials, use variables, and keep things maintainable.

Method 5 — Page Builder or Per-Widget CSS (Granular Control)

Best for: Elementor/Divi/Bricks/Beaver Builder etc.

• Elementor: Select widget/section → Advanced → Custom CSS (Pro) or use a global site CSS panel.
• Divi: Module settings → Advanced → Custom CSS.

Scope just one page using body classes:

/* Target a specific page by its ID (find it in the body tag in DevTools) */
.page-id-123 .hero-title { letter-spacing: .03em; text-transform: uppercase; }Code language: CSS (css)

How to Find the Right Selectors (DevTools Workflow)

1. Inspect the element (Right-click → Inspect).
2. In the Elements panel, note classes and structure.
3. In the Styles panel, see what rules already apply—this tells you the specificity you must beat.
4. Write a minimal selector and test changes live in DevTools.
5. Paste the final rule into your chosen method (Additional CSS, plugin, child theme).
6. Purge caches and refresh.

Selector shortcuts you’ll use a lot:

/* Global typography */
:root { --heading: "Inter", system-ui, sans-serif; --brand: #3b82f6; }
h1, h2, h3 { font-family: var(--heading); }

/* Navigation links */
.site-navigation a, .wp-block-navigation a { text-decoration: none; }

/* Images */
.entry-content img, .wp-block-image img { border-radius: .5rem; }

/* Buttons */
.wp-block-button__link { background: var(--brand); }

/* Footer */
.site-footer, .wp-block-template-part.footer { font-size: .95rem; opacity: .9; }Code language: CSS (css)

Mobile-First, Responsively

Use media queries sparingly, but clearly:

/* Small screens - tighten paddings */
@media (max-width: 600px) {
  .site-header { padding: .5rem 1rem; }
  .wp-block-columns { gap: .75rem; }
}
Code language: CSS (css)

Avoid These Gotchas

• Don’t edit parent theme files. Updates overwrite them.
• Don’t spam !important. Increase specificity or adjust load order instead.
• Remember caches. Purge plugin/CDN/server cache and hard refresh the browser.
• Keep selectors stable. Prefer semantic/container classes over deep, brittle chains.

Quick Wins (Copy–Paste Snippets)

1) Clean up post meta:

.posted-on, .byline, .cat-links, .tags-links { display: none; }Code language: CSS (css)

2) Sharper container rhythm:

.entry-content > * + * { margin-top: 1.2em; }Code language: CSS (css)

3) Consistent link style:

a { text-decoration: underline; text-underline-offset: .15em; }
a:hover { text-decoration-thickness: 2px; }
Code language: CSS (css)

4) Card look for images:

.wp-block-image img { border-radius: .75rem; box-shadow: 0 8px 24px rgba(0,0,0,.08); }Code language: CSS (css)

5) Smoother headings:

h1,h2,h3 { line-height: 1.15; letter-spacing: .005em; }Code language: CSS (css)

Troubleshooting: “My CSS Isn’t Working!”

1. Wrong selector? Re-inspect and test in DevTools.
2. Specificity too low? Target more precisely (add a parent class) instead of !important.
3. Load order conflict? Ensure your CSS loads after theme/page-builder styles (child theme enqueue or plugin handles this).
4. Cache in the way? Purge plugin/CDN/server cache; hard refresh (Ctrl/Cmd + Shift + R).
5. Minifiers? Temporarily disable CSS minification to debug.

FAQ: How to Edit CSS in WordPress

1) Where do I put CSS if the Customizer isn’t available?
Use a Custom CSS plugin or a child theme. Block themes often hide the Customizer.

2) Will updates remove my CSS?
Not if you use Additional CSS, a Custom CSS plugin, or a child theme. Editing parent theme files risks losing changes.

3) Can I style just one page/post?
Yes—target .page-id-XX or .postid-XX on the <body> element.

4) How do I style only mobile?
Wrap rules in @media (max-width: …) queries, e.g. 600px.

5) Elementor/Divi user?
Add CSS in the widget/section Advanced tab (or global CSS panel). For site-wide styles, a plugin or child theme is cleaner.