Interactive HTML and CSS sandpit

You can edit the html and css in the text boxes. A pink background indicates that the text has not been rendered since it was last changed. All HTML tags must be properly nested. The results of rendering the HTML will be added above any earlier results, immediately below the red line. CSS changes will be applied to the entire page.

Reload this page to restart with a clean slate.

block elements:

Block elements should be at the top level.

style elements:

Style elements change the style of a span of text.

list and definition elements:

List elements (li) must be the children of a list (ol, ul). Definition terms (dt) and descriptions (dd) must be children of a definition list (dl).

See the web for more information on CSS, CSS colour names and details of HTML tags.

Most-recent rendering appears immediately below the break: