Edit CSS live

Every value in Rules can be changed in place, and the page changes as you type. The edit goes into the page's own rule, so every element that rule styles follows, as in DevTools; the element's own style attribute is listed at the top, even when empty.

• Click a value to edit it. Enter or clicking away keeps it, Esc puts back what was there, and Tab moves to the next value.
• ↑ and ↓ step the number at the caret by 1, by 10 with Shift⇧ and by 0.1 with Alt⌥, keeping its unit.
• While you type a word, suggestions offer the keywords the property accepts, named colours and the page's var(--…) custom properties.
• The checkbox beside a declaration turns it off; it stays listed, struck through, to turn back on.
• Add at the foot of a rule adds a declaration: its name (with suggestions), then Tab and its value. Typing color: red as the name takes both.
• Click a property's name to rename it in place: the value moves to the new name.
• A swatch sits beside a value that holds a colour (the first one, in a shadow or a gradient); click it for the system's colour picker, and the page follows as it moves.
• Click a rule's selector to edit it; the rule then styles what the new selector finds. One the browser does not take is refused, and says so.
• New rule, beside the Rules title, adds a rule for the selection in Nitpique's own stylesheet: every element like it by default, or any selector you type, and optionally for a state (:hover, ::before) or one of the page's breakpoints. It is listed as Nitpique, empty, ready for its first declaration.