CSS gives you the power to change pretty much everything about how your WordPress site looks. It's that powerful…
But here's the problem with CSS:
It's not accessible to beginners - you need to know at least a bit about code if you want to do anything with it. And even if you do know the basics, it can take a while to make things work like you want them to.
CSS Hero is a plugin that changes that. It makes the power of CSS accessible to anyone by giving you a beginner-friendly interface to make CSS changes to your WordPress theme and WordPress plugins. Everything happens in real-time and on the frontend.
And in February of 2018, CSS Hero launched v3 which features a new interface, new features, and a complete rewrite of the plugin's core code.
Whether you're a beginner who wants to start customizing your site with CSS or a developer looking to speed up your workflow, read my CSS Hero review for a deeper look at how this plugin lets you customize your WordPress site's CSS.
CSS Hero Review: What The Plugin Does
Ok, so you know that CSS Hero gives you a graphic interface to make CSS changes to your WordPress theme and plugins.
Here are some of the specific features:
- Two editing modes. You can use the graphical interface or make changes with the new full-powered code editor.
- Device-specific edits. CSS Hero makes media queries easy by letting you quickly style elements for just specific devices. You can also edit and create your own media breakpoints.
- Device previews. You can also preview different devices to quickly see how your changes look on different devices.
- Pre-made snippets and variables. Editable style combinations make it easy to quickly apply new styles even if you're not a designer. You can also save your own snippets/variables for re-use later on.
- Undo/redo changes. Easily move forward or backward if you ever make a mistake.
- Unsplash integration. Quickly import images from Unsplash (for example, as a CSS background).
- Google fonts. Integrated by default.
- No edits to core files. CSS Hero doesn't make any changes to your core theme or plugin files, so you can safely deactivate it with no issues if needed.
- No lock-in. CSS Hero also lets you export all your custom CSS as CSS, LESS, or JSON so that you're never locked into the plugin.
- LESS CSS powered. LESS CSS is a popular CSS preprocessor, though only developers will really care about this.
And if you're already familiar with CSS Hero v2 and just want a quick summary of the new features in CSS Hero v3, the biggest changes are:
- Full-powered code editor to go alongside the graphic interface
- Better export
- Variables and snippets
- Custom responsive breakpoints and better responsive management
Now that you have a better understanding of the feature list, let's take this CSS Hero review a bit more hands-on...
Hands-on With CSS Hero: Exploring The Interface
To start off, I'll show you how CSS Hero works to customize your WordPress theme. Then, in the next section, I'll quickly show you an example of how it works with a plugin.
When you launch the CSS Hero, you'll see:
- (1) a live preview of your site on the right-hand side. You'll see any CSS changes that you make in real-time.
- (2) the CSS editor. You can either use the graphic interface at the top or the direct code editor below. You can also toggle over to view the full CSS code inspector.
- (3) the top bar. This includes various settings and options that make your life easier.
Selecting An Element To Edit
To edit a specific element, all you need to do is click on it on the live preview. For example, to edit the styling for your post titles, you'd just click on the post title:
It's not just for text, either. You can also click on areas - like your entire sidebar or the wrapper around your post content.
If you want to navigate to a different page, CSS Hero also lets you switch between Select and Navigate mode so that you can actually click on links (rather than editing the link's style).
Applying New Styles To An Element
Once you've selected your element, you can use the sidebar on the left to actually start applying styles.
Let's say you want to change the font and font color of the post title.
All you need to do is navigate to the Typography section. Then, you can apply a new color, pick a font from the drop-down (you can even use the Font Manager to add or remove fonts), and voila...you see your new style on the live preview:
In the screenshot above, you can also see that CSS Hero actually adds the real code to the new code editor, which makes for easy direct tweaks if you already know your way around CSS.
In total, CSS Hero includes graphic interface sections for:
- Extra (stuff like box shadow, visibility, float, etc.)
What's nice is that there's also a search box so that you can quickly find a specific property.
Using Snippets To Quickly Add Styles
As I mentioned in the feature list, CSS Hero includes something called "snippets" that let you quickly add more complex styles to an element.
For example, let's say that you want to add some style to the bland Read More link in Genesis and make it a button:
You could use the method I showed you above to do everything yourself.
Or, you could just use CSS Hero's pre-built button snippets to apply all the relevant styling with a single click:
In total, CSS Hero has built-in snippets for:
And you can also save your own snippets to reuse them later.
The nice thing is that if you ever update your snippet, that change will automatically get pushed out to all of the elements using that snippet.
Using Responsive Previews And Media Queries
Another neat thing that you can do with CSS Hero is:
- Preview how your design looks on different devices
- Use built-in media queries to apply styles to specific devices
You access these controls by clicking on the Editing Mode option:
If you click on any of the devices, you'll see a live preview of your site on that device. Additionally, any CSS that you add while editing that specific device (as opposed to All Devices), will only apply to that specific device (based on media queries).
If you want to customize the media breakpoints, you can use the Media Query Manager to edit the existing breakpoints or add your own:
Creating Your Own Variables
Variables allow you to store a repeatable value and then control it from a single location later on. For example, you could store your own brand color as @myColor: red and use that brand color in multiple different locations.
Then, to change your brand color at every location, you'd just need to update the variable one time.
To create your CSS variables, you just click on the Variable icon and then click Add Variable:
Exporting Your CSS Code
What I really like about CSS Hero is that it doesn't try to lock you in. At any time, you can switch over to the Inspector interface to:
- See all the custom CSS that you've created
- Export your CSS with a single button click:
If you wanted to, this means that you can use CSS Hero while you're developing a website. Then, once you're happy with how everything looks, you can export your CSS, delete CSS Hero, and manually add the CSS code to your site.
Using CSS Hero To Edit A Plugin's Styles (e.g. Elementor)
Lest you thought CSS Hero only worked on themes, here's a quick example of how you can also use CSS Hero to customize the output of a plugin.
There's really no difference in functionality - I just wanted to prove that it works. All you do is:
- Click on the element you want to edit (just like before)
- Make your edits using the sidebar
How Much Does CSS Hero Cost?
CSS Hero sells three different plans. All are full-featured, the only difference is how many sites you can install CSS Hero on.
- 1 site - $29
- 5 sites - $59
- 999 sites (but not unlimited!) - $199
Final Thoughts On CSS Hero
I'd only played around with the previous CSS Hero once or twice, so I wasn't super familiar with v2 before trying v3.
From what I remember, though, CSS Hero v3 definitely feels like an improvement. If you already know a little CSS, the addition of the full code editor makes it a lot more powerful. You can use the graphical interface when it's faster. But if you just want to tweak something small, you can also work directly with the code when that's faster.
Finally, the fact that you can export your clean CSS when you're done and delete the plugin if desired makes it really handy and lightweight for working on client sites.
Whether you're developing sites for yourself or clients, I think CSS Hero is a great way to speed up your workflow and, especially if you're not a CSS expert, give yourself more control over your site's appearance.