CSS Examples & Practice

CSS Editor

The online CSS editor — often labelled Try it Yourself — lets you write HTML and CSS in the browser and see the rendered result immediately, with no setup, install or account. It is the single best tool for learning: change a value, press Run, and watch what happens. This page explains how it works and gives you starter code to experiment with.

What the editor does

The editor has two areas: a code pane where you type a complete HTML document (including a <style> block), and a preview pane that shows the live result. When you press Run, the editor renders your HTML exactly as a browser would. Because everything lives in one document, there is nothing to save or configure — it just works.

How to use it

Write or paste a full HTML document — start with <!DOCTYPE html> and include a <style> block for your CSS.
Put your CSS rules between the <style> and </style> tags in the <head>.
Put your visible content (headings, text, buttons) between <body> and </body>.
Press Run to render the preview.
Change any value — a color, a size, a font — and press Run again to compare.

ℹ️

The live editor on this site only renders examples marked as HTML. CSS-only and SCSS snippets are shown for reading and copying, since they are fragments rather than full pages.

Starter example 1 — your first styles

Copy this into the editor and press Run. Then try changing the color, the font-size, and the background to see each property in action.

Starter — runnable

Example

<!DOCTYPE html>
<html>
<head>
<style>
  body { font-family:system-ui,sans-serif; background:#f0fdfa;
         padding:40px; }
  h1 { color:#0f766e; font-size:34px; }
  p  { color:#334155; line-height:1.6; }
  .highlight { background:#fef08a; padding:2px 6px; border-radius:4px; }
</style>
</head>
<body>
  <h1>Hello, CSS!</h1>
  <p>This paragraph is styled. Try editing the
     <span class="highlight">highlighted</span> part.</p>
</body>
</html>

Starter example 2 — a box you can restyle

This one is a playground for the box model. Change padding, border, border-radius and box-shadow, then press Run to see how each affects the box.

Box playground — runnable

Example

<!DOCTYPE html>
<html>
<head>
<style>
  body { display:grid; place-items:center; height:100vh; margin:0;
         background:#eef2ff; font-family:system-ui,sans-serif; }
  .box { background:#fff; padding:28px; width:240px;
         border:2px solid #6366f1; border-radius:14px;
         box-shadow:0 10px 30px rgba(99,102,241,.25);
         text-align:center; }
  .box h2 { margin:0 0 8px; color:#4338ca; }
</style>
</head>
<body>
  <div class="box">
    <h2>Edit me</h2>
    <p>Change padding, border and shadow, then Run.</p>
  </div>
</body>
</html>

Tips for experimenting

Change one property at a time so you can see exactly what it does.
Use obvious values while learning — a bright color or 50px of padding makes changes easy to spot.
Add comments with /* ... */ to leave notes to yourself inside the CSS.
Copy a working example, then break it on purpose — understanding errors teaches you the rules.
Open your browser DevTools (press F12) to inspect any element and tweak its styles live.

⚠️

When an example does not render as expected, check that every { has a matching }, every declaration ends with a semicolon, and the <style> tag is inside the <head>.