CSS Hero Inspector

Inspector brings the CSS editing experience to a whole new level with a clean and smart interface to help you making CSS adjustments to your WordPress Themes and Plugins on the fly.

Try Inspector Get CSS Hero + Inspector

Available in Personal and Pro Plans.

The perfect CSS Editor for WordPress

Whether you're a CSS guru or a newbie willing to get familiar with CSS the Inspector is the perfect tool for you to provide CSS customizations to your Wordpress Themes and Plugins.

My Fantastic Website

Gates Of Delirium

Stand and fight we do consider Reminded of an inner pact between us That's seen as we go And ride there In motion To fields in debts of honour defending Stand the marchers soaring talons Peaceful lives will not deliver freedom Fighting we know, Destroy oppression The point to reaction As leaders look to you attacking

Close To The Edge

A seasoned witch could call you from the depths of your disgrace, And rearrange your liver to the solid mental grace, And achieve it all with music that came quickly from afar, Then taste the fruit of man recorded losing all against the hour. And assessing points to nowhere, leading ev'ry single one. A dewdrop can exalt us like the music of the sun, And take away the plain in which we move, And choose the course you're running.

Desktop
iPad Landscape
iPad Portrait
iPhone Landscape
iPhone Portrait
Add Media Query

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

@media screen and (max-width:768px){ #site header { padding: 50px 0; } #site article { text-align: center; } }

#site header .title { margin: 10px 0; font-size: 24px; }

#site header { padding: 30px 0; }

#site article > p { color: #828B94; font-size:11px; margin-bottom:20px; }

Select Export

Syntax Check

A pack of useful features

Features you would expect from a desktop code editor available on your WordPress front-end.

Review Your Code

Inspect, refine and edit the CSS Hero generated CSS code

Add extra custom CSS live

Get a live preview of your CSS edits on your website

Avoid typical CSS mistakes

Your code is automatically checked by the smart CSSLint engine

Easy element selection

Point and click selection for editable elements

Refine Device Specific CSS

Apply edits to all devices or limited to a media query

Add your own Media Queries

Extend your CSS Hero code to new media queries

Comment your code

Keep track of edits or simply add a note to your code

Save \ Export

Save - and enjoy the results - or export tidy CSS code

Built on a solid ground

Codemirror + CSSLint

Code Rendering Inspector Pro relies on CodeMirror to render CSS code, CodeMirror is the most powerful and solid JS plugin to render code, used widely across the web from CodePen to JSFiddle.

Syntax Check Inspector Pro uses CSSLint to help point out problems with your CSS code. It does basic syntax checking as well as applying a set of rules to the code that look for problematic patterns or signs of inefficiency.

/