lecture 2: fonts and colours

Two things commonly done with styles are to change the font, or typeface of text, and the colours of the web page. You will have seen that both beige.html and blue.html differed from each other in these ways.

Although we will be covering these briefly on this slide you should ensure you read the relevant topic pages properly after the lecture has finished. These are important topics and you do need to understand them.

1. colours

Colours are defined with RGB codes. RGB stands for "red-green-blue". These are the three primary colours of light (remember we are dealing with light, not paint, so when you mix all colours you get white). Each colour is given a value between 0 and 255 expressed in hexadecimal notation (see the teaching materials for more explanation). Codes are then prefixed by a hashmark (#). You would normally define the background colour of a page in the <body> tag - although you can give other tags different background colours if you want (as I have done with the samples here). Text colours are defined in text tags. The sample style sheets have examples of both. PRACTICAL EXERCISE: if you have successfully created "my.css" then try changing the colours of one or more elements (background or text). You could use the four colours given here in your experimentation.	#0000ff = blue	text
	#ffff00 = yellow	text
	#006400 = dark green	text
	#fa8072 = salmon pink	text

2. fonts

There are many different named fonts but they can be divided into three broad categories:

Sans-serif fonts like Lucida Sans Unicode, Arial, Comic Sans MS or Verdana
Serif fonts like Times New Roman, Garamond or Bookman Old Style
Monospace fonts, in which every letter is the same width, like Courier New.

It is important to realise that many fonts are not loaded up into browsers. Therefore, you can never be sure that your page will be rendered in the intended font (although all the above named ones are pretty standard). When defining fonts you always need to provide a list: again, see the sample style sheets for examples. This is discussed in more detail on the teaching materials page about fonts. The style sheet property for defining fonts is font-family.

PRACTICAL EXERCISE: try changing the fonts in "my.css" if you have successfully created it. The font names given in the paragraphs above should work on almost all browsers.

<< previous slide

return to lesson 2 index

next slide >>

lecture menu

lecture 2: fonts and colours

1. colours

2. fonts