Colours and measurements
Colours
Many styles accept colours as values, or part of their values, such as color, background and border. Note that colours use the American spellings, not the British (or other) spellings (color instead of colour, and gray instead of grey). The CSS 3 colours allow either spelling of grey-based colours, but you may find that browsers expect the American spellings.
There are five main ways to specify colours, #rrggbb, #rgb the two rgb( ) syntaxes and actually typing the name of the colour. You can choose which is best for you. For the first two methods, the colours are defined in hex.
- #rrggbb
- rr = 00 to ff for red
- gg = 00 to ff for green
- bb = 00 to ff for blue
#b85c4f- #rgb
- r = 0 to f for red
- g = 0 to f for green
- b = 0 to f for blue
#b54- rgb( cr, cg, cb )
- cr = 0 to 255 for red
- cg = 0 to 255 for green
- cb = 0 to 255 for blue
rgb( 184, 92, 79 )- rgb( pr, pg, pb )
- pr = 0% to 100% for red
- pg = 0% to 100% for green
- pb = 0% to 100% for blue
rgb( 72%, 36%, 31% )- Colour names
-
Firstly, there are the 16 main HTML colours (plus orange) - I put the black backgrounds in so you could see the colours better aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, yellow
CSS 3 also defines many other colours and most current browsers support them. However, there are still browsers in use that do not. Whether you choose to use them is up to you.
Lastly there are are the system colours, which give the colours specified by the operating system. Support for these depends on what is provided by the operating system and browser. Generally, it is a good idea not to rely on these except in controlled situations.
There is also inherit which inherits the relevant colour from the parent element. Backgrounds can also use transparent.
Now for something totally non-standard but fun all the same, here's how to apply colour styles to your scrollbars in IE 5.5+ and Opera (other browsers will just ignore it).
Measurements
Many styles accept measurements, such as border and font sizes, line and element heights, widths and positions.
Measurements must always be given with units. The following measurement units are permitted.
- em
- 1em is the default font size for that element
- ex
- 1ex is the default lower case font size for that element (as letters like 'x')
- px
- Pixels, relative to the normal pixel size of a normal computer screen
- %
- Percentage of defualt size or parent element size
- in
- Inches ~= 2.54 centimeters
- cm
- Centimeters
- mm
- Millimeters
- pt
- 1 point = 1/72 inches
- pc
- 1 pica = 12 points
in, cm, mm, pt and pc will only make sense if the browser knows how many pixels are on the screen and how big the screen is. Often, this is not the case. Not all computers know how big the screen is, as not all screens tell the computer how big they are. In these cases, the browser must make a guess.
This paragraph element has been defined with
border: 3px double fuchsia;. It will have a double lined border 3 pixels wide, that will be
fuchsia coloured.
Last modified: 4 September 2008