Applying custom CSS to your WordPress site allows you to fine-tune its appearance beyond what the default theme and block settings can offer. In this guide, we’ll explore how to add custom CSS in both Full Site Editing (FSE) themes and classic themes like Astra — without causing conflicts with existing styles.
Understanding Where to Add Custom CSS
When working with an FSE theme (block editor theme) or a classic theme, it’s important to place your CSS in the correct location to ensure it works properly and doesn’t interfere with other theme or plugin styles.
The best practice:
✅ Assign unique custom class names to your elements.
✅ Always add a prefix to avoid conflicts. For example, if your name is Riad Mahmud, you could use rm- as the prefix, like rm-border-background.
Adding Custom CSS in an FSE Theme
Step-by-Step:
- Create or edit a page in your block editor theme.
- Add your desired layout (e.g., three columns, grouped blocks).
- Assign a custom class in the Advanced → Additional CSS class(es) section.
- Open your browser’s Inspect Element tool:
- Right-click on the element and choose Inspect.
- Search for your custom class name.
- Use the Inspector Stylesheet to test your CSS: cssCopyEdit
.rm-border-background { padding: 30px; border: 1px solid #ededed; background: #fff; transition: 0.4s; } .rm-border-background:hover { background: #ff0000; color: #fff; } .rm-border-background:hover img { filter: grayscale(100%) brightness(0) invert(1); } - Copy the final CSS from the inspector.
- In the Site Editor, open Styles → Additional CSS and paste your code.
- Save changes and refresh your page.
Adding Custom CSS in a Classic Theme
If you’re using a classic theme like Astra:
1️⃣ Go to Appearance → Customize → Additional CSS.
2️⃣ Paste the same CSS you used for the FSE theme.
3️⃣ Publish your changes.
The style will look identical across both FSE and classic themes if your custom class names and code are consistent.
Tips for Writing Conflict-Free CSS
✅ Always use a unique prefix for your classes.
✅ Keep CSS modular — target only specific classes, not global elements like div or p unless necessary.
✅ Use hover effects and transitions to improve user experience.
✅ Test on multiple devices to ensure responsive behavior.
Additional Learning Resources
✅ WordPress CSS Basics – Official Docs
✅ Using the Browser Inspect Tool
✅ CSS Tricks – Complete Guide to CSS
✅ WordPress Full Site Editing Overview
By following this approach, you can apply professional-grade custom styling in WordPress—whether you’re using the latest FSE theme or sticking to a classic one.
