Edit CSS live in your browser

Click any element on any page and edit its CSS from the side panel. Change the styles it actually uses, or the real stylesheet rules behind them, and the page updates as you type.

What you can edit

Select an element in edit mode and the CSS tab of the side panel shows its styles in layers, each one editable in place:

• Effective Styles: one row per property with the value the element actually ends up using after the cascade. Change a value here and the edit applies to that element only. Hover a row to see which rule the value comes from.
• Rules: the real rules from the page's stylesheets that match the element, with their actual selectors and a source badge showing the file and line. Editing a rule behaves like editing the stylesheet, so every element that matches the selector updates, not only the one you picked.
• element.style: the element's own inline styles, always first in the list.
• Inherited from sections: rules on ancestor elements that pass inherited properties such as color and font down to the selection.
• Classes: the element's class list, editable as text. See the Tailwind class editor for how that works.

Styles for ::before and ::after get their own small groups in Effective Styles, and rules inside @media, @supports, @layer, @container and @scope appear in their own sections with the full wrapper chain kept intact.

How to edit CSS on a live page

1. Open the page you want to change.
2. Start Screen Ruler by clicking its toolbar icon or pressing Alt + Shift + S (Option + Shift + S on a Mac).
3. Click Edit (the pencil) in the control bar at the bottom of the page. The control bar switches to the editing tools and the side panel switches to the editor.
4. Click the element you want to style. Use Alt + Shift + Up to move to its parent if you picked something too small.
5. Click a value in Effective Styles or in a rule and type. The page updates as you type.

To add a declaration, click empty space in a block, or click beside an existing line to insert one directly below it. To add a whole new rule for the selected element, use the Add Rule button (the +) in a section header. Selectors are editable too, so you can retarget a rule on the fly.

It behaves like a stylesheet, not a text box

The editor keeps track of the cascade while you work, so what you see in the panel matches what the browser does:

• Losing declarations are struck through, with a note naming the rule that beats them.
• Invalid CSS is flagged. Unknown properties and values the browser would reject get a wavy underline instead of silently doing nothing.
• Checkboxes turn declarations off without deleting them, so you can compare with and without a property.
• Autocomplete suggests property names, common keyword values and the page's own CSS custom properties.
• Arrow keys step numbers. Up and Down change a number by 1, with Shift for 10 and Alt for 0.1.
• Pasting works in bulk. Paste display: flex; gap: 12px and it splits into separate declarations.
• One undo history. Ctrl + Z (Cmd + Z on a Mac) steps back through CSS and HTML edits in the order you made them.

When you edit a value in Effective Styles that comes from a shared rule, Screen Ruler writes the change as an inline override on that element, and adds !important only when the value it has to beat is itself important. Edit the rule directly when you want the change to apply everywhere the selector matches.

Stylesheets from other domains

Browsers hide the contents of stylesheets loaded from another domain, such as a CDN, from extensions. When that happens the editor tells you how many stylesheets are hidden and offers a Grant access link. Grant it once and those rules appear in the editor alongside the rest.

Limits

• Edits change the page in your browser only. They do not touch the site's source files, and visitors never see them. Copy the result from the Changes tab into your code.
• Some rules are shown as read-only when the browser does not allow them to be rewritten.
• Rule edits can be saved per site and restored next time. Inline edits made on a single element do not survive a reload.
• It cannot run on chrome:// pages, other extensions or the Chrome Web Store.

When it is useful

• Design tweaks on the real page. Try spacing, color and type changes in place instead of mocking them up.
• Debugging CSS. See which rule wins, switch declarations off and find the one causing the problem.
• Feedback for developers. Make the change yourself and hand over a ready-to-paste diff instead of a description.
• Working on sites you do not control. Experiment on staging, client or competitor pages without access to the code.

To preview hover and focus styles or edit a rule inside a media query, see editing states and breakpoints. For a full walkthrough, read the live editing docs.

Edit CSS Live is a Studio feature. Every install starts with a free 7-day trial with everything unlocked, no card needed.

Common questions

How is this different from editing CSS in Chrome DevTools?

The editing model is similar: real rules, real selectors, edits that cascade. The differences are around it. Screen Ruler adds an Effective Styles view that shows the one winning value per property, flags invalid values, tracks every edit as a copyable diff in the Changes tab, and can save your rule edits per site so they come back after a reload. DevTools edits are lost when you reload.

Do my CSS changes affect the live website for other people?

No. Edits only change the page in your own browser tab. Nothing is sent to the site, and other visitors see the original page.

Can I edit CSS on a site I do not own?

Yes. It works on any page your browser can open, including staging sites and pages behind a login, because it edits the copy of the page loaded in your tab.

Why are some styles missing from the editor?

Usually because the stylesheet comes from another domain and the browser hides its contents. Click Grant access in the note above the editor and those rules load in.

How do I get my changes back into my code?

Open the Changes tab. Every edited rule is grouped by stylesheet as a diff, and the copy button turns a group into ready-to-paste CSS.