A friendly tool for beginners to paste CSS, learn it line by line, and see a live preview. It adds suggested values for common properties and lets you hear explanations with the Web Speech API. No frameworks.
- Paste CSS and step through each line with clear explanations
- Live preview in a sandboxed iframe with sample HTML presets
- One click suggested values for properties like display, position, transform and more
- Colour picker that drives
currentColorbased styles - Text to speech playback using browser speech synthesis with language and voice selection
- Glow aesthetic with gradients and soft shadows
Short explanations are summarised from MDN and W3C terminology. For deeper learning, see these trusted sources:
- MDN CSS Reference. https://developer.mozilla.org/en-US/docs/Web/CSS/Reference
- MDN CSS properties index. https://developer.mozilla.org/en-US/docs/Web/CSS/Properties
- MDN CSS color values. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_colors/Color_values
- MDN display property. https://developer.mozilla.org/en-US/docs/Web/CSS/display
- W3C CSS Cascade and Inheritance. https://www.w3.org/TR/css-cascade-3/
- Web Speech API on MDN. https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API
Just open index.html in a modern Chromium browser for best voice support.
- Add richer per property examples with live mini playgrounds
- Provide optional machine translation for explanations
- Persist sessions in localStorage