CSS - 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.
