Interactive XML and CSS sandpit

Tasks:

  1. Use the Load XML button to load a sample recipe marked up in XML. Render this example using the Render XML button.
  2. Find a recipe on the internet; cut and paste it into the XML text box on the right or edit the text that's in the box already. In this box you can add XML tags and mark up your recipe. Select a span of text, then use the buttons to the left to insert XML tags around the text span. All XML tags must be properly nested.
    Press “Render XML” to transform your XML to HTML and render it below. The results of rendering your XML will be added above any earlier results, immediately below the red line.
  3. Change the CSS stylesheet in the lower box on the right to get different effects in the different sections of the recipe. 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.
  4. When you have done this you're done.

You can edit the xml and css in the text boxes. A pink background indicates that the text has not been rendered since it was last changed. All XML tags must be properly nested. The results of rendering the XML 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.

recipe elements:

quantities, times and temperatures:

attribution:

See the web for more information on CSS, and CSS colour names.

Most-recent rendering appears immediately below the break: