HTML & CSS Live Editor
Type HTML on one side, CSS on the other, and watch your web page build itself as you type. Nothing to install and nothing is uploaded — the page is drawn right here in your browser.
To practise HTML online, type your tags in the HTML box and the web page appears instantly in the preview beside it. For example <h1>My School</h1> makes a large heading, and the CSS rule h1 { color: blue; } turns it blue. This editor carries 110 tags and CSS properties plus 10 step-by-step lessons.
Live preview
HTML
CSS
Start from a template
Each one is a complete, working page you can pull apart and change.
Step-by-step lessons
Ten small jobs. Each one loads a starting page — make the change, then press Check.
Tag & property reference
All 110 tags and CSS properties your syllabus asks for — press Insert to drop working code into the editor.
Learn web design by seeing it change
HTML gives a page its parts and CSS gives them their looks. When the result appears the moment you type, the link between the code and the page becomes obvious — which is exactly what a practical exam tests.
Write the HTML
Tags like <h1> and <p> decide what is on the page.
Style it with CSS
Switch to the CSS tab and change colours, sizes and spacing.
Watch the preview
The page redraws by itself a moment after you stop typing.
Save your work
Press .html to download the finished page and open it in any browser.
How a tag is built
<p class="note">Hello</p>
- <p> is the opening tag — it starts the element.
- class="note" is an attribute — extra information.
- Hello is the content you can see.
- </p> is the closing tag with a slash.
A few tags such as <br>, <hr> and <img> have no content, so they need no closing tag.
How a CSS rule is built
h1 { color: blue; font-size: 32px; }
- h1 is the selector — which elements to style.
- color is the property, blue is its value.
- Each declaration ends with a semicolon
;. - Everything sits inside curly brackets
{ }.
Use .name for a class, #name for an id, and tag on its own for every tag of that kind.
The box model
Every element is a rectangle made of four rings, from the inside out:
- content — the text or picture itself
- padding — space inside the border
- border — the line around it
- margin — space outside, pushing neighbours away
Try padding: 20px and then margin: 20px on the same box in the preview to feel the difference.
Colours and units students get wrong
Colours: a name (red), a hex code (#DC2626) or rgb(223, 57, 57) — all three mean a colour.
Sizes: px is a fixed dot, % is a share of the parent, em is a multiple of the text size.
Spelling: CSS uses the American spelling color, never colour — the browser silently ignores the wrong one.
HTML & CSS Live Editor — your questions
How do I practise HTML online with output?
Type your code in the HTML box on this page and the finished web page appears in the preview panel beside it, redrawing a moment after you stop typing. Switch to the CSS tab to style it. Nothing is installed and nothing is uploaded — the page is drawn entirely inside your own browser.
What is the difference between HTML and CSS?
HTML gives a page its parts and CSS gives them their looks. A tag such as <p>Hello</p> says 'this is a paragraph of text'. A CSS rule such as p { color: green; font-size: 18px; } says how that paragraph should appear. You need both: HTML for structure, CSS for presentation.
How is a CSS rule written?
A rule is a selector followed by declarations inside curly brackets: h1 { color: blue; font-size: 32px; }. Here h1 is the selector, color is a property and blue is its value, and every declaration ends in a semicolon. Use .name for a class, #name for an id and a plain tag name for every tag of that kind.
Why is my CSS colour not working?
The commonest reason is spelling: CSS uses the American spelling color, never colour, and the browser silently ignores a property it does not recognise. Check also that the declaration ends with a semicolon, that the curly brackets are closed, and that the selector really matches the element you meant.
Which tags do not need a closing tag?
A few tags hold no content, so they are written on their own with no closing tag: <br> for a line break, <hr> for a horizontal rule, <img> for a picture, plus <input> and <meta>. Every other tag opens and closes as a pair, with the closing tag carrying a slash.
What is the box model in CSS?
Every element is a rectangle made of four rings from the inside out: content (the text or picture), padding (space inside the border), border (the line around it) and margin (space outside, pushing neighbours away). Try padding: 20px and then margin: 20px on the same box here to feel the difference.
Can I save my web page for a practical file?
Yes. Press the .html button and the complete page, HTML and CSS together, downloads as a single file you can open in any browser or attach to your record file. The Print button puts the code and the preview on paper, which is what most Class 9 and 10 IT practical files ask for.