How the CSS editor works
Type CSS on the left and the Live Style Preview on the right updates about half a second after you stop typing. The preview is a sandboxed frame containing a fixed sample page, and your stylesheet is applied on top of a small reset (* { margin: 0; padding: 0; box-sizing: border-box } and body { font-family: Arial, sans-serif; padding: 20px }). The sample markup is:
<div class="container">
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<p>This is a paragraph with <a href="#">a link</a> and <strong>bold text</strong>. ...</p>
<p>Try changing colors, fonts, sizes, ...</p>
<button class="btn">Button</button>
</div>
So selectors like .container, h1, a:hover, and .btn show results immediately, while a rule for .navbar does nothing because there is no such element. The frame allows no scripts, which keeps the preview a pure CSS test.
The editor is CodeMirror 5 in CSS mode. Press Ctrl + Space for suggestions of property names, keyword values, and pseudo-classes. Brackets and quotes close automatically, and each rule block can be folded from the gutter. Unknown property names (a typo such as colr) are drawn in the error color, but values are not checked.
Worked example: formatting a one-line stylesheet
CSS pulled from a production site or a component library is often compressed. Paste it:
.card{display:flex;gap:1rem;padding:16px}
.card:hover,.card:focus-within{box-shadow:0 2px 8px rgba(0,0,0,.15)}
@media (max-width:600px){.card{flex-direction:column}}
Click Beautify CSS (js-beautify, 2-space indent) and you get:
.card {
display: flex;
gap: 1rem;
padding: 16px
}
.card:hover,
.card:focus-within {
box-shadow: 0 2px 8px rgba(0, 0, 0, .15)
}
@media (max-width:600px) {
.card {
flex-direction: column
}
}
Each selector in a list gets its own line and rules are separated by a blank line. The formatter does not add a missing final semicolon, so if you plan to add declarations to a rule, add the ; first.
CSS mistakes that fail silently
Browsers skip CSS they cannot parse without any error message, so a broken rule simply has no effect in the preview. These are the usual causes.
A missing semicolon swallows the next declaration
.btn {
color: white
background: #0f766e;
}
The browser reads one declaration, color: white background: #0f766e, which is invalid, so both the color and the background are dropped.
Numbers without units
.container { padding: 20; margin-top: 1.5; }
Only 0 may omit its unit (and a few properties like line-height and z-index take plain numbers). Write 20px or 1.5rem.
Double-slash comments
// button styles
.btn { border-radius: 6px; }
CSS only has /* ... */ comments. The // line becomes part of the next selector, which is then invalid, so the whole .btn rule is ignored.
Link states in the wrong order
a:hover { color: #764ba2; }
a:link { color: #667eea; }
Both selectors have the same specificity, so the later one wins and the hover color never shows. Keep the order :link, :visited, :hover, :active. You can test this directly with the link in the sample paragraph.
Limitations
- You cannot change the preview markup. To test against your own HTML, use a
<style> tag in the HTML editor.
- Minify CSS strips comments and all whitespace around
{ } : ; ,. That turns .menu :focus into .menu:focus, which selects a different element, and it also rewrites spaces inside strings, so content: " : " becomes content: ":".
- No Sass, Less, or PostCSS compilation, and no vendor prefixing.
- Your stylesheet is kept in this browser's localStorage (saved every two minutes and on Ctrl + S). It is not uploaded anywhere.
When to use a different tool
- To test styles against your own page, open the HTML Code Editor and put the CSS in a
<style> block.
- To format a stylesheet with the original kept side by side, use the CSS Beautifier.
- To compress CSS in a separate output pane and see the size saved, use the CSS Minifier.
Frequently asked questions
Why does my CSS not change the preview?
The preview renders a fixed sample page: a div with class container holding an h1, an h2, two paragraphs with a link and bold text, and a button with class btn. Your CSS only has a visible effect if its selectors match those elements. To test styles against your own markup, put the CSS in a style tag in the HTML Code Editor.
How do I get CSS autocomplete?
Press Ctrl+Space while typing. The editor suggests property names, keyword values, and pseudo-classes such as hover, based on what you have typed. Value suggestions come from one shared keyword list, so after display: fl you will see flex next to floralwhite. It does not suggest class names from your HTML.
Does the CSS editor check my code for errors?
Only partly. Unknown property names, such as a typo like colr, are shown in the error color, but values are not checked: color: rde or padding: 20 look normal. There is no linter, and the browser silently drops anything it cannot parse. If a rule has no effect in the preview, check for a missing semicolon, a missing unit, or a // comment above it.
Can I write Sass or SCSS here?
No. The editor and preview handle plain CSS only. Sass variables, mixins, and @include are not compiled. Native CSS nesting and custom properties such as var(--brand) work if your browser supports them, because the preview uses your browser's own CSS engine.
Why did Minify CSS change my selector?
Minify removes all whitespace around colons, commas, semicolons, and braces. That turns .menu :focus (any focused element inside .menu) into .menu:focus (the menu itself when focused), and it also removes spaces inside strings such as content: " : ". Keep a copy of the original, and check selectors with a space before a pseudo-class.