CSS · rules with somewhere to land
Rules in,
page restyled.
Paste a stylesheet with no HTML around it and CodeRush applies it to a small page of representative elements — headings, paragraphs, lists, links and form controls — so you can see what the rules actually do.
- No HTML needed
- Live as you type
- Device widths to check
A stylesheet needs a page
CodeRush provides one.
Rules on their own are detected as CSS — selectors, a declaration block, properties and values, no markup — and the pad renders them against a representative document instead of an empty body. Typography, spacing, colour, borders and states all have something to act on.
body { margin: 0; min-height: 100vh; display: grid; place-items: center;
background: #2545ED; color: #FFF9CD;
font: 400 clamp(32px, 9vw, 104px)/1 Georgia, serif; }
h1 { margin: 0; letter-spacing: -0.05em; }
h1::after { content: '?'; color: #B9E4F4; }
p, li { font-family: Arial, Helvetica, sans-serif; font-size: 16px; }Apply this stylesheet in CodeRush
Live rendering re-runs as you type, so editing a value is a loop rather than a commit.
When you want your own markup
Two ways, both one paste.
Paste a complete HTML page with a <style> block and it runs as written — see the HTML playground. Or open Files, which separates index.html, style.css and script.js in local browser storage and combines them into one portable page for the preview, snapshots and share links.
Files is the better shape for a longer experiment: the stylesheet gets its own editor, and what comes out is still a single HTML document you can download or send as a link. Everything is composed locally; the separation never becomes a server-side project.
Checking it at other sizes
Responsive work needs more than a guess.
Devices renders the page at set widths so a media query can be checked rather than assumed, and the preview is a real frame, so hover, focus and transitions behave normally. Problems reports common accessibility gaps — a missing accessible name, a duplicate id — by parsing locally, without running anything.
When it looks right, keep it as a snapshot, download the page, or share a Rush link so a colleague sees the same rendering you do.
Questions
- Can I paste CSS without any HTML?
- Yes. CodeRush applies the stylesheet to a small page of representative elements so the rules have something to style.
- Can I use my own markup instead?
- Yes. Paste a complete page with a style block, or open Files to keep index.html, style.css and script.js in separate editors.
- Does it update as I type?
- Yes. Live rendering re-runs the preview while you edit, and Run reruns it on demand.
- Can I check a media query?
- Yes. Devices renders the page at set widths, and the preview is a real frame, so hover and focus states behave normally.
Not every idea needs a plan.