Interactive HTML and CSS sandpit

Tasks:

  1. Find some text on the internet and paste it into the HTML text box on the right or edit the text that's in the box already. In this box you can add HTML tags and change how your text will be displayed. Select a span of text, then use the buttons to the left to insert HTML tags around the text span. Press “Render HTML” to render your HTML at the bottom of the page.
    You can try adding headings and subheadings, turn items into a list, add a table or blockquotes for example.
    All HTML tags must be properly nested. If you make a nesting mistake, an error message will tell you where the problem is. The results of rendering your HTML will be added above any earlier results, immediately below the red line.
  2. Change the CSS stylesheet in the lower box on the right. The stylesheet changes the appearance of your text. In the stylesheet you can define the font size of elements, font types or colours. Press the “Apply CSS” button the apply your changes. CSS changes will be applied to the entire page.
    A pink background indicates that the text has not been rendered since it was last changed. Reload this page to restart with a clean slate.
  3. When you have done this try the XML page.

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).

Table elements:

See the web for more information on CSS supported by WebKit, CSS colour names and details of HTML5 tags.

Most-recent rendering appears immediately below the red line: