Colour Scheme demonstrator

Show/Hide: Definitions Formulae Instructions

Introduction:

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.

Instructions

  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 http://www.cleancss.com.
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 linebreaks
 of course.
  1. Ordered List
  2. Second Item
example-image broken-image
Example Data Table
TableHeaderCells
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 - 2024   All Rights Reserved