Ryan Stenhouse, Writes and Codes - The Basics of CSS

The Basics of CSS - Part 1

This is the first in a series of tutorials, designed for the complete beginner to standards-compliant and accessible website development. In this tutorial, I am to give you, the reader, a basic understanding of CSS (Cascading Style Sheets), and an appreciation of its role in making the web a prettier and more accessible place.

CSS, (Cascading Style Sheets) at its most basic, is a small scripting language of sorts which makes it possible to graphically control the look of a document in essentially every way. The best way to explain CSS is to show by example:

	body{
		font-family:sans-serif;
		color:black;
		font-size:small;
	}

The above CSS would make all text within your page’s <body> tag look like this. Didn’t see it?

Here is a much larger example.

Admitently, that is not too impressive. So we could try another example:

	body{
		font-family:Arial, Verdana, Tahoma, sans-serif;
		size:medium;
		font-weight:bold;
	}

The font-family: line above is the most interesting of the CSS block. It takes as its arguments a list of Fonts. What is great about this is a thing called order of precedence. You list the fonts by name in the order you wish for them to be used. Where the name of the font contains spaces, you should encase them in quotes (“)

	font-family:"Comic Sans MS","Tempus Sans ITC","Trebuchet MS",sans-serif;

Also important is the last font mentioned – sans-serif. When you name fonts to be used, the font must be present on the computer rendering the web page. Where it is not, the web browser would default to it’s own font to display your text – with potentially disaterous results.

Sans-serif falls into the category of generic fonts:

Sans-Serif (Fonts like Arial, or Verdana where the letters are rounded).
Serif (Fonts like Times New Roman, where letters are blocky and have decorating flicks.
Monospace (Fonts like Courier, where the letters are a fixed size and have fixed spacing between them).

You should always include the appropriate generic font group when specifying fonts using CSS, in order to ensure that the web page you are designing renders consistently on every platform.

CSS also allows you to control how hyperlinks look on your page the following code:

	a{
		color:red;
		text-decoration:none;
		font-weight:bold;
	}

Will produce a hyperlink which looks like this. You may add a hover effect by:

	a:hover{
		color:blue;
		text-decoration:overline;
	}

Valid values for text-decoration: are none, underline, overline, and strikethrough.

The colour: line in many of the examples above will take web safe colour constants as a parameter, or any hexadecimal colour (e.g. #FFFFFF; for white).

The font-weight: line can take bold, bolder, light, lighter and normal as arguments. The values bolder and lighter are relative, and will cause the font to look appropriately lighter or darker then the surrounding text.

The font-size: line takes the size of the font as either a standard constant (xx-small, x-small, small, medium, large, x-large, xx-large); or as a fixed size in either points (pt) or pixels (px). Where no unit is specified with the number, points are assumed.