Colour Scheme demonstrator



This page allows you to try out CSS easily, within a 'sandbox' lower down on this page. All changes are applied instantaneously, cutting out the 'save and re-load' cycle that most web developer's will be used to.
Click on any of the links at the top of the page to reveal (or hide) more information about this tool.


If you are reading this paragraph, then you probably don't have JavaScript installed/enabled on your computer.
At this point in time the calculators on this site are entirely dependent on JavaScript. Given enough time and money it is hoped to develop a version in the future which will be able to operate independently. Since JavaScript runs on your own computer, rather than on this server, it has been possible to set up this site much more quickly than if a server-side language was used, and it is possible to serve far more pages with the available bandwidth.
If you think that you can assist with this project in any way, then please visit the Support section and leave a message.


Cascading Style Sheets. An open, W3C standard, which allows designers to define how documents are presented on screen.



  1. Choose an HTML tag from the first drop-down list.
  2. Select a CSS property from the second drop-down list.
  3. Type, or Copy-and-Paste the desired value in to the third field.
  4. The value will be applied when you press the RETURN key, or the 'Apply Changes' button.
  5. The values will be encoded into valid CSS, and displayed below.
  6. To apply further effects simply repeat the process above, all existing styling will be retained, unless a later value over-rides an earlier one.
  7. The CSS stylesheet displayed may need de-duplication etc; consider using the CSS Formatter and Optimiser at
Change page appearance

H1: Colour Scheme demonstrator

Level 2 Heading

Level 3 Heading

Level 4 Heading

Level 5 Heading
Level 6 Heading

Simple paragraph of text. Contains a few words inside a <span> in addition to all of this ordinary text. None of the HTML tags on this page make use of 'class' or 'ID' atributes. This sentence contains an off-page hyperlink and also an on-page hyperlink which will take on the appearance of having been visited, if you click it once.

Small section of pre-formatted text.With linebreaksof course.
  1. Ordered List
  2. Second Item
example-image broken-image
Example Data Table
For a simpleDatagrid
With oneempty cell:
Finally...some 'Footer'Cells
This is a 'Legend'

The <legend> is within a <fieldset>, within a <form>, within a <div>. This is a simple <p> within the form & fieldset.

(Password field)

© Copyright Mike Brockington 2004 - 2021   All Rights Reserved