Web Design and Authoring: Session three
How to write CSS styles
A stylesheet contains one or more rules which describe how page elements should be displayed.
There are two parts to a style rule: the selector and the declaration block.
A style rule is written like this:
selector declaration block
selector { property: value;
property: value;
property: value;
}
On the left of the curly bracket:
the selector: selects the parts of the document to which the styles will be applied
On the right of the curly bracket:
a declaration block: made up of one or more style declarations, each declaration is a property:value pair, the declarations each separated by a semi-colon (;).
The closing curly bracket completes the declaration block.
An example
To set the font style, size, colour and background colour of our web page, we could set up the following style rule:
body { font-family: Arial, Helvetica, sans-serif;
font-size: 90%;
color: #009B8F;
background-color: #FFFFB0;
}
What do these properties and values mean?
Font-family
Font-family specifies the font to be used for display. A computer can only display fonts it has already installed, and these may be limited in number. Also, Windows and Mac computers often have different fonts installed.
To get around these difficulties we specify a family of fonts, starting with our preferred display font, followed by alternatives, in order of preference, down to the generic serif or sans-serif font. If the browser cannot find the first listed font on the user's computer it will look for the second, then the third, and so on.
Font names with spaces should be quoted, such as: "Times New Roman".
A useful website for viewing different fonts and checking their popularity on both Windows and Mac operating systems is:
www.codestyle.org/css/font-family/
Font-size
Font size can be specified in several ways in CSS. Here, to keep things simple, we'll stick to using percentages.
A size of 90% applied to the body selector will display the text content of the main body of the document at 90% of the user's browser basefont size. A user with low vision may have their browser basefont size set at 30pt, for example, rather than the standard 12pt.
We shall also specify sizes for different heading levels as percentages too, giving an h1 a size of 250%, for example.
Using percentages for font size means that our text is scalable for users, but the headings and text will always remain in relative proportion to one another.
Color
Color sets the text colour. Note the American spelling of color, the English spelling will not work.
Colour in HTML and CSS is specified in Hexadecimal code: three pairs of two digit-numbers or letters (00 to FF), starting with a # sign.
For more on HTML colors visit:
www.w3schools.com/html/html_colors.asp
Background-color
Sets the background colour for the page.
CSS reference sources
Only four of the many CSS properties are outlined above. For a complete list of CSS properties view:
www.w3schools.com/css/css_reference.asp
If you prefer a book for reference, the standard pocket version is:
CSS Pocket Reference: Visual Presentation for the Web, by Eric a Meyer, 3rd edition (Sebastopol, CA:O'Reilly, 2007)
Many HTML textbooks also include a CSS as well as an HTML reference section, for example:
HTML, XHTML, and CSS: Visual QuickStart Guide: With XHTML and CSS, by Elizabeth Castro, 6th edition (Berkeley, CA:Peachpit, 2006)