Online CSS Editor - Free Stylesheet Editor in Browser

.text-layer {
    font-family: Monaco, "Courier New", monospace;
    font-size: 12pX;
    cursor: text;
}

.blinker {
    animation-duration: 1s;
    animation-name: blink;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: linear;
}

@keyframes blink {
    0% {
        opacity: 0;
    }
    40% {
        opacity: 0;
    }
    40.5% {
        opacity: 1
    }
    100% {
        opacity: 1
    }
}

About This CSS Editor

CSS has changed more in the last five years than in the fifteen before them. Grid and flexbox removed the need for layout hacks, custom properties brought real variables, and container queries finally let a component respond to its own size rather than the viewport.

The editor highlights selectors, properties and values, and matches braces so an unclosed rule is obvious rather than mysterious.

Modern CSS you should be using

CSS syntax reference
Syntax	What it does
`:root { --brand: #06f; }`	Custom property. Read with var(--brand, fallback); it cascades and can be changed at runtime.
`display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));`	A responsive card grid with no media queries at all.
`gap: 1rem;`	Spacing between flex and grid items. Replaces margin hacks.
`clamp(1rem, 2.5vw, 2rem)`	Fluid sizing with a floor and a ceiling - fluid typography in one value.
`@container (min-width: 400px) { ... }`	Container query: responds to the parent element's width, not the viewport.
`:is(h1, h2, h3) a { ... }`	Groups selectors and keeps specificity readable; :where() does the same at zero specificity.
`aspect-ratio: 16 / 9;`	Reserves the box before an image or embed loads, which is a direct CLS fix.
`@media (prefers-reduced-motion: reduce)`	Respect the setting - vestibular disorders are real.

Why your rule is not applying

Specificity. An id beats any number of classes, and an inline style beats both. If a rule is being ignored, compare specificity before adding !important - which is almost always the wrong fix.
Margin collapse. Adjacent vertical margins collapse into the larger of the two. Flex and grid containers do not collapse margins, which is one reason gap is easier.
Percentage heights. height: 100% needs the parent to have a definite height. This is why the old html, body { height: 100% } incantation existed; 100dvh now solves the viewport case properly on mobile.
z-index and stacking contexts. A z-index only competes within its stacking context, and transform, opacity below 1, and filter all create one. A z-index of 9999 inside a context still sits below a sibling context.
Box sizing. Set box-sizing: border-box globally unless you enjoy subtracting padding from widths by hand.

Your Code Never Leaves Your Browser

The editor is JavaScript running in this tab. Nothing you type is posted to a server, stored, logged or associated with you, and there is no account and no autosave. That makes it safe to paste a snippet from a private codebase in order to read it with highlighting. The trade-off is that nothing persists either — refresh the page and your content is gone, so copy anything you want to keep.

Frequently Asked Questions

Does this editor preview my CSS?

No - it is a text editor with CSS highlighting and brace matching. For a live preview you need a browser with devtools open, or a local build.

Should I still use float for layout?

No. Float exists to wrap text around an image, which is the job it was designed for. Use flexbox for one-dimensional layout and grid for two-dimensional layout.

What is the difference between rem and em?

rem is relative to the root font size and is therefore predictable. em is relative to the current element's font size and compounds when nested, which is occasionally useful and frequently confusing. Default to rem.