Styling properties

CSS has many styling properties, including text properties (dealing with fonts and character styles), colours and backgrounds, margins, and whitespace around elements, and general object type classifications.

Colours

Wherever colours are allowed, the choice is from 'aqua', 'black', 'blue', 'fuchsia', 'gray', 'green', 'lime', 'maroon', 'navy', 'olive', 'purple', 'red', 'silver', 'teal', 'white' and 'yellow'. An RGB value can be given, with the keyword 'rgb(r, g, b)' ('r' represents red, 'g' represents green and 'b' represents blue), or with a hexadecimal number in the form '#rgb' or '#rrggbb'. The examples below are equivalent:

emph   { ... ; color: rgb(128, 0, 255)  }

emph   { ... ; color: #8000FF  }

Sizes

Wherever sizes are allowed, the choice is from absolute sizes given in points ('pt'), inches ('in'), centimetres ('cm'), millimetres ('mm') or picas ('pc'), and from relative sizes 'em' (height of the element's font), 'ex' (the height of a letter) and 'px' (pixels relative to the canvas). Values can have a '+' (the initial setting) or '-' prefix.

Often, sizes can be given as a percentage of an inherited size, so that '50%' means half the current size. Note that percentage values can be greater than 100, and a size value of '200%' indicates that the object should be twice the inherited size.

External references (URLs)

Sometimes, an external resource can be called in using a URL (see Chapter 30). The function 'url(…)' is used for this purpose. Relative URL references have the stylesheet document location as their context location. Quotes may enclose the actual URL. Significant characters need to be escaped, including '(', ')', ' ' ', ' “ ' and ',', by placing a '' character before them, such as '('.

Font style properties

Characters are presented in a specified font, at a given size, and possibly rendered with style characteristics such as bold, italic and small caps.

Font family

The 'font-family' property specifies the font to display the text in, such as Helvetica. When the font name includes spaces, the name must be quoted, as in the following example:

para   { font-family: "Times New Roman" }

Because not all systems have the same fonts available, alternatives can be expressed, and are separated by commas. An application should pick the first one that matches an installed font, reading from left to right through the list. To cover situations where no font names match, there are some generic names available, and one of these should be added to the end of the list. They are 'serif' (a font like Times, or the font used for this paragraph, with lines on the end of each major stroke), 'sans-serif' (a font without serifs, such as Arial or Helvetica, and the titles and headings in this book), 'cursive' (Zapf-Chancery), 'fantasy' (Western) and 'monospace' (a font where all characters are the same width, such as Courier, the font used for the examples in this chapter):

title   {font-family: Arial, sans-serif }

Font style

The 'font-style' property affects the text in other ways, either slanting the letters, properly italicizing them, or using small caps in place of lower-case letters. The values 'normal', 'italic' and 'oblique' (slanted) are used:

title { ... ; font-style: italic }

Note that oblique is not quite the same as italic, and is often achieved by simply slanting the text electronically.

Font weight

The 'font-weight' property darkens or lightens the text using the values 'bold' (or '700'), 'normal' (or '400') (the default), '100', '200', '300', '500', '600' and '800', with 'bolder' and 'lighter' adjusting an inherited value up or down by 100:

title   { ... ; font-weight: bold }

Small caps

The text can also be displayed in small-caps style, using the 'font-variant' property, which takes a value of 'normal' (the default) or 'small-caps':

title  { ... ; font-variant: small-caps }

The 'font-size' property determines the size to display the text, and is usually given in point sizes, though more vague measures such as 'xx-large', 'x-large', 'large', 'medium', 'small' , 'x-small' and 'xx-small' are also available. It is also possible to increase or decrease the size from an inherited value using 'smaller' and 'larger':

title   { ... ; font-size: 24pt  }

para    { ... ; font-size: medium  }

comment { ... ; font-size: smaller  }

The 'line-height' property specifies a gap between lines. A value of 'normal' means that no gap is added. A percentage of the inherited value can be given, and a number can be used as a calculation of the inherited height:

title   { ... ; line-height: 32pt  }

para    { ... ; line-height: normal  }

comment { ... ; line-height: 0.9  }

Combined font details

The 'font' property conveniently combines the properties described above into a single statement, with parameters that specify the font style, the variant, the weight, the size and line height (separated by a '/' character), and the font family. The Title element example below combines all the statements for this element shown above:

title   { font: italic small-caps bold
                   24pt/32pt Arial, sans-serif }