If you’re not familiar with that three-letter acronym in the post title, CSS is a coding language that makes it easy to style every aspect of how your WordPress site looks. It’s immensely powerful and lets you customize your site to a level that no theme or plugin options panel can match…
But there’s always been one problem with using CSS to edit your WordPress site:
It’s not accessible to casual users because it requires specialized coding knowledge. And even if you do have some of that knowledge, it can still take up too much time if you’re not a CSS guru.
CSS Hero is a WordPress plugin that solves both those pain points.
It gives you a simple, beginner-friendly interface where you can quickly edit every single element on your site.
If you’re a casual user, you can stick to the graphical interface where you’ll be able to apply styles using simple dropdowns and color pickers – no actual CSS knowledge required. And if you’re a developer, you can also take advantage of the in-dashboard code editor to quickly apply your own tweaks as well.
In my CSS Hero tutorial and review, I’ll first show you how you can use CSS Hero to customize your WordPress theme (and plugins!). Then, I’ll give you some of my own thoughts on the plugin at the end.
How CSS Hero works (at a high level)
I’m going to start with a quick high-level look at how CSS Hero works. Then, I’ll jump into a more detailed how-to in the next sections.
Essentially, CSS Hero gives you a live editor interface to make your changes. On the left and top, you get two menus. And in the bulk of your screen, you’ll see a live preview of your site:
To edit an element on your site, you just click on it on the live preview. Then, you’ll be able to use the sidebar to apply new styles using dropdowns, color pickers, and other beginner-friendly options:
Easy enough, right?
How to use CSS Hero to customize your WordPress theme
Ok, now it’s time to jump into some actual examples.
Let’s say that you want to change the color of every single post title on your site. With CSS Hero, all you need to do is:
- Click on the post title in the live preview of your site
- Use the Typography tab to pick a new color
That’s it! Watch:
That’s a simple example…but it’s not a great example because it’s something most theme options already let you control.
So let’s get more creative…
Now, let’s say you want to add a border around the Contact link in your site’s top navigation menu to draw attention to it. This is something I’ve done on my portfolio site and I’ve received a few different comments asking how I did it.
Well, with CSS Hero, you would just right-click on the Contact menu link and select Only This:
By selecting Only This, you tell CSS Hero that you only want to edit this specific navigation menu link, rather than all navigation links (for the example above, that would include Home, About, etc.).
Once you’ve done that, you can quickly apply a border using the graphical interface:
Just for comparison, if you didn’t select Only This, your edit would look like this instead:
See the difference? When you just left click – you select every instance of that type of link. But when you right-click, you can select only one specific instance.
I could keep showing you more examples…but honestly, it’s pretty much the same for every element because all you need to do is “Click → Style”.
In total, CSS Hero gives you 7 sections for styling options:
There are also some helpful options when making individual changes. For example, if you’re tweaking colors you can access pre-made color palettes for certain design aesthetics:
Going more advanced with the CSS Hero interface
Beyond the simple “Click → Style” interface, here are some of the more advanced things you can do with CSS Hero.
Control responsive design for different devices
If you click on the Device icon, you can do two things:
- Set up your own “media queries”. If you’re not familiar with what a media query is, it basically lets you control how your site looks for different devices. For example, you could set up one media query to target “smartphones”.
- Choose from the pre-made media queries for popular devices.
This feature is super powerful. Here’s why:
If you select one of the different devices, you’ll see a live preview of your site on that device.
But more importantly, any tweaks you make while in this mode will only apply to that specific device.
For example, you could change the font size of your post content but only for mobile phones. Or you could hide a CTA button but only on mobile devices. Or just perform any other CSS tweak for specific devices!
Add your own custom fonts to use on your site
CSS Hero already gives you access to a bunch of fonts. But if you want to add even more fonts from Google Fonts or Adobe Typekit, you can do so through the included Font Manager:
Work with CSS directly (if you already know CSS)
CSS Hero is great because it bypasses the need to understand the underlying CSS code. But if you do already understand CSS, CSS Hero also includes some neat features that can speed up your workflow.
First, you get access to a full code editor that you can expand/collapse as needed. When you click on an element in your live preview, CSS Hero will automatically add the proper selector:
You can also maximize this editor if you want more space. And if you launch the full Inspector interface, you can use LESS CSS syntax, as well (no worries if you don’t know what that means! It’s only for developers):
Finally, CSS Hero also includes a graphic way to add your own CSS selectors:
Use snippets and variables to speed up your workflow
Snippets and Variables are two cool, and beginner-accessible, concepts that can further speed up your workflows:
- Snippets – snippets are saved, reusable edits that you can quickly apply “on the fly”. CSS Hero includes a bunch of built-in snippets, but you can also save your own edits to reuse later.
- Variables – variables help you control commonly used values. For example, you could save your primary brand color as a variable. Then, you would use that variable in your CSS code instead of hard-coding the actual color. The benefit is that if you ever need to change your brand color in the future, you only need to edit the variable once, rather than editing every single instance like you would if you hard-coded the color.
For example, to quickly get a great-looking button, you could just apply one of the included button snippets rather than making all the CSS edits yourself:
And you can easily save and manage variables via the graphical interface:
Switch between select and navigate modes to browse to other pages
By default, every time you click on an element on your site, CSS Hero will select that element to edit.
But what if you want to navigate to a different page to style that page?
Rather than needing to reload the CSS Hero editor, you can just switch the Click Mode from Select to Navigate:
In Navigate mode, you can click to browse around your site. Then, when you’re ready to go back to editing, you simply switch back to Select Mode.
Manage revisions and use undo/redo
One more interface feature! If you ever make a mistake, you can use the top-menu buttons to undo/redo an individual change. And you can also access a detailed revision history to jump back even further:
You can use CSS Hero to customize plugin output, too!
Have you ever installed a plugin that does exactly what you want functionality wise…but the output is just ugly even though it’s functionally perfect?
This is something that’s especially common with free plugins. And it’s also a pain point that CSS Hero can completely eliminate.
Basically, everything that I detailed above applies to your plugins, too.
For example, here’s what it looks like to style an Elementor page builder design:
And here’s what it looks like to customize a Contact Form 7 form:
Wave goodbye to ugly plugin output forever!
Three specific things you’ll like about CSS Hero
At this point, I hope that you have a pretty good idea of how CSS Hero works. Now, I’m going to move a bit more into the CSS Hero review part with some specific things I think you’ll like:
1. The element selection process is simple and error-free
I consider myself mildly adept with CSS, but it can still be a struggle for me to find the right CSS selector sometimes. I’m guessing I’m not the only one, either…
But with CSS Hero, you can always grab the right selector on the first try. So even if you prefer to work directly with CSS rather than CSS Hero’s graphical options, I think it still might speed up your workflow just because of how easily you can navigate between selectors (including media queries).
2. You can use multiple editing modes
Speaking of directly editing CSS, I love that CSS Hero has something to offer for both casual users and developers.
If you have no idea how CSS works, you can just minimize the code editor and make all your tweaks through the graphical interface with dropdowns, color pickers, etc.
But if you do know how to use CSS code, you can use the code editor and inspector tools to directly work with the code.
This isn’t a “jack of all trades master of none” scenario, either. I really think CSS Hero does a great job on both fronts.
3. You can export your finalized CSS code and disable the plugin
Finally, I love that CSS Hero never locks you in. At any point, you can export all of your CSS code from the Inspector tool:
You can export:
- Normal CSS
- Minified CSS
- A JSON project file
So, if you want, you can style your site using CSS Hero. Then, once you’ve finalized everything, you can:
- Export your CSS code
- Add it directly to your WordPress child theme’s stylesheet
- Delete the CSS Hero plugin from your site
One thing to consider about CSS Hero
There is one weird quirk about CSS Hero that might affect your workflow if you like to develop sites on a localhost:
CSS Hero requires an active Internet connection in order to function.
So if you ever work on sites on a localhost in an environment with no Internet, you won’t be able to use CSS Hero.
This is pretty niche. And if you plan to work on your live website all the time, or just don’t know what I mean by “localhost”, you probably won’t ever run into this issue.
CSS Hero Price: How much does it cost?
All CSS Hero plans are full-featured – the only difference is the number of sites that each plan supports:
- 1 site – $29
- 5 sites – $59
- 999 sites – $199
All plans come with one year of updates and support, as well.
Final thoughts on CSS Hero
Whether you’re a beginner or a CSS expert, I think CSS Hero has something to offer. It doesn’t just make CSS easier, it also makes CSS faster. So no matter which of those two things you’re chasing after, you can benefit.
I also love that it works on plugins. Making plugin content look right is something a lot of WordPress users struggle with, so a tool that’s this accessible is hugely beneficial.
Additionally, if you’re someone who does want to get better at actual CSS, CSS Hero is awesome in that way as well. Because you can use both the graphical editor and the code editor, you can learn about CSS by studying how the underlying code connects to the stuff you’re doing in the graphical editor.
All in all, if you’ve ever felt limited by your theme’s and plugins’ customization options, or if you just want a way to speed up how you build WordPress sites, give CSS Hero a look.
CSS Hero offers a bunch of theme and plugin demos at its site, so you can play around with the full editor before you crack open your wallet!
Disclosure: This post contains affiliate links. This means we may make a small commission if you make a purchase.