How to Add Custom CSS to a WordPress Page or Post

Custom CSS is one of the most useful WordPress skills because it lets you fix small design problems without replacing a theme or installing another plugin. You might need to adjust a button, hide an awkward margin, restyle a single landing page, improve a table, make a form fit mobile screens, or change the spacing around a callout box. The trick is not merely knowing where to paste CSS. The trick is knowing where it belongs so the change survives updates and does not accidentally affect the whole site.

This restored WPColt guide answers the search intent behind the old URL: how can a WordPress user add custom CSS to a specific page or post safely? The answer depends on scope. A one-page fix should be targeted. A site-wide brand style should live in a site-wide CSS area or theme file. A reusable project change belongs in a child theme or custom plugin. The smaller and clearer the scope, the easier the site will be to maintain later.

Before you write CSS, check the built-in controls

Modern WordPress themes, especially block themes, include many design controls. You may be able to change colors, typography, spacing, button styles, layout widths, and block styles without writing any CSS. Start there. CSS is powerful, but every manual rule becomes another thing someone has to understand during a redesign.

If the built-in controls do the job, use them. If they do not, CSS is the right next step. Good custom CSS should be small, specific, documented by its selector, and easy to remove. Avoid writing a large patch that fights the theme on every page. That usually means the theme or layout choice is wrong for the site.

Method 1: Add site-wide CSS with Additional CSS

The easiest place to add CSS on many WordPress sites is the Additional CSS panel. In classic themes, you will often find it under Appearance > Customize > Additional CSS. In block themes, site-wide CSS can also appear inside the Styles interface. This CSS is stored by WordPress and is not overwritten when the theme updates, although it is tied to the active theme and may not apply after switching themes.

Use this method for small global changes: button colors, link styles, table spacing, heading adjustments, image captions, or repeated editorial components. Keep the rules organized. Add comments if the reason is not obvious. Do not paste an entire framework into Additional CSS. It is best for compact site-specific fixes.

Method 2: Target one page or post with body classes

WordPress adds useful classes to the body element. A single page might include a class like page-id-123. A single post might include postid-456. You can use that class at the beginning of a selector to limit CSS to one URL.

For example, if you want a wider table only on one page, you could write CSS that starts with the page ID class. The page ID is visible in the edit URL in wp-admin, and it can also be found by inspecting the front-end HTML. This is often the cleanest solution when one legacy post needs special treatment and the rest of the site should stay unchanged.

.page-id-123 .entry-content table { width: 100%; font-size: 16px; }
.postid-456 .quick-answer { border-left-color: #f47b20; }

The important part is the first selector. Without .page-id-123 or .postid-456, the CSS could affect every table or quick-answer box on the site.

Method 3: Add a custom CSS class to a block

The block editor lets you assign an additional CSS class to many blocks. Select the block, open the Advanced panel, and add a class name such as wpcolt-pricing-note or legacy-warning-box. Then write CSS for that class in your site-wide CSS area.

This approach is better than targeting a random auto-generated class because your custom class explains intent. It also lets you reuse the same style on multiple pages. For example, if several posts need the same warning box, add the same class to each block and maintain one CSS rule.

.legacy-warning-box { padding: 20px; border-left: 5px solid #f47b20; background: #f8fafc; }
.legacy-warning-box strong { color: #1f2a44; }

Choose names based on purpose, not appearance. A class like orange-box becomes confusing if the design later changes to blue. A class like legacy-warning-box still makes sense.

Method 4: Use a child theme for durable theme changes

If the CSS is part of the site identity, a child theme is often the better home. A child theme lets you keep custom CSS and template changes separate from the parent theme, so parent updates do not overwrite your work. This is useful for agency projects, client sites, and sites with a long-term design direction.

Use a child theme when CSS is not a quick tweak but a real part of the build: layout systems, custom components, reusable editorial blocks, product-card styles, or site-wide typography. Keep the stylesheet organized by section. If the file becomes large, split responsibilities clearly and remove old rules during redesigns.

Method 5: Enqueue a small stylesheet from a custom plugin

Sometimes CSS belongs to functionality rather than the theme. For example, if you create a custom shortcode, custom post type, pricing table, glossary block, or plugin-specific component, the CSS may belong with that feature. In that case, enqueue a small stylesheet from a custom plugin or functionality plugin.

This avoids a common maintenance problem: a theme change breaks a feature because the CSS was hidden inside the old theme. Feature-specific CSS should travel with the feature. Theme-specific CSS should live with the theme.

How to find the right selector

Open the page in your browser, right-click the element you want to change, and inspect it. Look for stable classes near the element. Prefer your own custom class, a block class, a theme component class, or a WordPress body class. Avoid targeting brittle selectors such as the third div inside another div unless there is no better option.

Good selectors are specific enough to affect the intended element and general enough to survive small layout changes. If you need to use !important repeatedly, pause and inspect why the theme is winning. One !important rule can be acceptable for a small override, but a stylesheet full of it usually signals a specificity problem.

Mobile testing matters

Many CSS fixes look good on desktop and fail on phones. After adding custom CSS, test at least three widths: mobile, tablet, and desktop. Check long headings, buttons, forms, tables, images, and navigation. Make sure the CSS does not create horizontal scrolling or hide content behind sticky headers.

Use responsive rules only when needed. A simple page-specific spacing change may not need a media query. A table, grid, or two-column layout probably does. Keep breakpoints connected to the layout problem, not to a copied framework value you do not understand.

@media (max-width: 700px) {
  .postid-456 .comparison-table { display: block; overflow-x: auto; }
}

Performance and cache considerations

Small custom CSS is usually lightweight. Problems appear when a site loads several CSS plugins, page-builder CSS, child-theme CSS, inline CSS, icon fonts, and unused framework files all at once. If you only need ten rules, do not install a large styling plugin just to hold them.

After changing CSS, clear the relevant caches. WordPress page cache, theme optimization cache, CDN cache, and browser cache can all keep serving old CSS. If visitors still see the old design, confirm whether the new CSS is present in the page source and whether a cached stylesheet is being reused.

Examples of good page-specific CSS

Common mistakes to avoid

• Editing the parent theme stylesheet directly and losing changes on update.
• Writing broad selectors that accidentally change the whole site.
• Using too many !important rules instead of fixing selector scope.
• Forgetting to test mobile widths.
• Installing a plugin for a few lines of CSS when Additional CSS is enough.
• Targeting unstable generated classes that may change after a builder update.

FAQ

Can I add CSS to only one WordPress post?

Yes. Use the post body class, such as .postid-456, or add a custom class to a block inside that post. Put the CSS in Additional CSS, a child theme, or another maintained stylesheet.

Will Additional CSS disappear when WordPress updates?

No, normal WordPress updates should not remove it. However, Additional CSS is connected to the active theme. If you switch themes, those styles may no longer apply until you move or recreate them for the new theme.

Should I use a plugin for custom CSS?

Use a plugin only when it improves workflow, version control, or client editing. For a handful of rules, the built-in CSS area is usually enough. For durable project CSS, use a child theme or a small feature plugin.

Final recommendation

Add custom CSS with the smallest safe scope. Use built-in style controls first. Use Additional CSS for compact global rules. Use page and post body classes for one-off fixes. Use block classes for reusable components. Use a child theme or enqueued stylesheet for durable design work. That gives you the flexibility of CSS without turning the site into a pile of mystery overrides.

Further reading: WordPress custom CSS documentation, WordPress Styles overview.