How to Add Custom CSS in WordPress Easily

To add custom CSS in WordPress, go to the WordPress dashboard, then navigate to Appearance > Customize > Additional CSS and enter your CSS code there. This method safely applies your styles without editing theme files directly.

Syntax

Custom CSS in WordPress is written just like regular CSS. You write selectors to target HTML elements and then define style rules inside curly braces.

• selector: targets the HTML element(s) you want to style.
• { property: value; }: defines the style rules for the selector.

Example: body { background-color: #f0f0f0; } changes the page background color.

css

selector {
  property: value;
}

Example

This example shows how to change the background color of your WordPress site and make all paragraph text blue using custom CSS added via the Customizer.

css

body {
  background-color: #e0f7fa;
}
p {
  color: #0077cc;
  font-size: 1.1rem;
}

Output

The website background changes to a light blue shade, and all paragraph text appears in blue color with slightly larger font size.

Common Pitfalls

Common mistakes when adding custom CSS in WordPress include:

• Adding CSS in the wrong place, like editing theme files directly, which can be lost on theme updates.
• Writing incorrect CSS syntax, such as missing semicolons or braces.
• Not using specific enough selectors, so styles don’t apply as expected.
• Forgetting to clear browser cache or site cache to see changes.

Always use the Additional CSS section in the Customizer to avoid losing your styles.

css

/* Wrong: editing theme style.css directly (can be overwritten) */
/* Right: use Appearance > Customize > Additional CSS */

Quick Reference

Action	Where to Add CSS	Notes
Add custom CSS safely	Appearance > Customize > Additional CSS	Best for beginners, no risk of losing styles on updates
Use a child theme	Child theme style.css file	For advanced users who want full control
Use a plugin	Custom CSS plugins	Good for managing CSS separately
Avoid editing parent theme files	Direct theme file edits	Changes lost on theme updates

Key Takeaways

Add custom CSS via Appearance > Customize > Additional CSS for safe, update-proof styling.

Write correct CSS syntax with selectors and style rules inside curly braces.

Avoid editing parent theme files directly to prevent losing changes on updates.

Use specific selectors to ensure your styles apply correctly.

Clear caches after adding CSS to see your changes immediately.