CSS Editor

What this CSS editor does

CSS (Cascading Style Sheets) controls how HTML looks: colors, fonts, spacing, layout with flexbox and grid, animations and responsive breakpoints. This editor lets you write and tidy a stylesheet in the browser, with syntax highlighting, property-name suggestions, bracket matching, find and replace, and a download that saves the file as styles.css.

Use it to sketch a component's styles, clean up rules copied out of DevTools, or keep a scratch stylesheet open while you learn. It doesn't apply your CSS to anything, so there's no live preview. The section on testing styles below covers the fastest ways to see them in action.

The toolbar has Clear, Copy, Download, Word Wrap, Dark Theme, Find / Replace and Full Screen. Start typing a property such as just and the editor offers justify-content, justify-items and similar names.

Example: a themed card

The snippet below uses custom properties, the :has() selector, color-mix() and a dark-mode media query. Paste it in to see how selectors, properties, values and at-rules are colored differently:

:root {
  --brand: #2563eb;
  --radius: 0.75rem;
}

.card {
  padding: 1.5rem;
  border: 1px solid color-mix(in srgb, var(--brand) 25%, white);
  border-radius: var(--radius);
}

/* Cards that contain an image lose their top padding */
.card:has(img) {
  padding-top: 0;
}

@media (prefers-color-scheme: dark) {
  .card {
    background: #0f172a;
    color: #e2e8f0;
  }
}

Testing your styles

CSS needs a page to style, so pair the downloaded file with some HTML:

1. Click Download. The file saves as styles.css, the name the link below expects.
2. In the same folder, create an HTML file whose <head> contains <link rel="stylesheet" href="styles.css">. The HTML editor can download one for you.
3. Open the HTML file in a browser and refresh after each change.

For one-off tweaks it's often quicker to stay in the browser: open developer tools (F12), select an element, and edit or add rules in the Styles panel. Changes vanish on reload, so copy anything you want to keep back into the editor.

Four things that trip people up

Specificity beats order. When two rules target the same element, the one with the more specific selector wins, regardless of which comes later. #nav a outranks .menu a even if the class rule is lower in the file. Order only decides ties. MDN's specificity guide explains the scoring.

Invalid declarations fail silently. Under the error-handling rules in CSS Syntax Module Level 3, a browser that can't parse a declaration throws away just that declaration and keeps going. A typo like colour: red produces no error at all, which is why the struck-through lines in DevTools are worth checking.

Custom property names are case-sensitive. --Brand and --brand are two different variables, per the CSS Custom Properties specification. var() accepts a fallback for when a variable isn't set: var(--brand, navy).

Width doesn't include padding by default. With the initial box-sizing: content-box, a width: 300px box with 20px padding renders 340px wide. Many stylesheets start with *, *::before, *::after { box-sizing: border-box; } so widths include padding and border.

Related tools and lessons

New to styling? The CSS course starts from selectors and the box model, and the CSS cheat sheet covers properties and selectors on one page. Before shipping, shrink the file with the CSS minifier, and pick or convert colors with the color picker.