CSS - Selectors, Properties and Values

Published 26/05/2004 10:27   |    Updated 13/02/2009 13:16
What are Selectors, Properties and Values?

Where HTML uses tags, CSS instead uses "selectors" - the names of the styles used in its internal and external style sheets - to label HTML tags and change the style of specific tags.

 

Each selector has a set of properties (inside curly brackets) which define the given style - the style's font, colour and background colour for instance.

 

Each of these properties is given a value (which follows a colon) and is separated by a semi-colon, like this:
 

Body {font-size: 0.5em; color: yellow; bgcolor: black;}

 

This example applied to an HTML document would see the text in between the document's tags (i.e. the content of the active window) produced in yellow on a black background at 0.5ems in size.

 


 

Some measurement types

There are several units of measurement within CSS, defining a range of aspects of the text. Here a few of the more common ones with which to familiarise yourself.


 

em (as in font-size: 0.5em)

Defines the font-size. An "em" is measurement approximately equal to the height of a single character.

 

px (as in font-size: 12px)

Is the unit for pixels.

 

pt (as in font-size: 12pt)

Is the unit for points size.

 


% (as in font-size: 80%)

Defines the percentage of the full-point size to be used.

 

 

Other units such as cm (centimetres), mm (millimetres) and in (inches), pretty much speak for themselves. N.B. When a value is zero, you don't need to state a specific unit, just the zero.

 

As with HTML and XHTML, when you feel you're ready try CSS out for yourself. Alternatively if you'd like to get a little more up to speed take your time and do some more reading.

 

Body {font-size: 0.5em; color: yellow; bgcolor: black;}


This example applied to an HTML document would see the text in between the document's tags (i.e. the content of the active window) produced in yellow on a black background at 0.5 ems in size.

 

 

« Using CSS

Optimising Images »

 

Please tell us how we can make this answer more useful.

Print