Introduction to CSS | Changing font sizes | Changing the fonts | Changing font colours | Changing background colours
CSS™ is a W3C technology used to format XHTML files. CSS stands for Cascading Style Sheets. CSS styles can be in three forms: inline, embedded, or external.
Our first CSS lesson will show you how to format pages using inline CSS styles.
Styles can be applied directly to an element on your XHTML document by using the
style attribute within a tag.
Let's change the size of some paragraph text to 30pt. To do this we use the syntax:
<p style="font-size: 30pt;">paragraph text</p>
This produces the output:
paragraph text
Likewise, we could make the text smaller, for example, replacing 30pt with 7pt will produce:
paragraph text
Besides point sizes (as above), there are other absolute
font sizes we could use, such as mm, cm and in
(inches).
As well as absolute length measurements, we could also use relative
length measurements. For instance, assigning font-size: 1em;
to the style attribute makes the font the same size as a capital M in whatever
the default size of the text is (called the M-height).
So if the default size of the text is 16pt, then declaring the font size as
1.5em; will make the text on the page 150 times the size of a capital M.
We will demonstrate this using the span element.
The <span> tag does not apply any inherent formatting of its own.
Rather it is used to group an area of text so that the author can specify a style for the
spanned area.
<p style="font-size: 16pt;">Some text some text some text
here's the size of a capital M
<span style="font-size: 1.5em;">some text in a span element</span>
some text outside the span element</p>
Produces:
Some text some text some text here's the size of a capital M some text in a span element some text outside the span element
Compare the size of the text within the <span>
element with that outside. It is exactly 1½ times the size of the capital M
in the <p> element. You could also change the 1.5em to 0.5em to
make the font only half as big as the default text. Relative length
measurements are usually preferable to absolute length, because it allows the user
to make the font larger (or smaller) by changing their browsers
default size. People with visual impairments may wish to do this, for example, to
make the text easier to read.
Other relative font sizes are ex which is the size of a lower case
x, px (which stands for pixel) and % (percent).
Changing the fonts on a page makes the web page look more appealing. To change the font, we use the attribute:
style="font-family: 'font name';"
<p style="font-family: 'times new roman';">Some text
in times new roman</p>
This gives the output:
Some text in times new roman
We can also use the span element here to apply the font
changes to only a portion of the paragraph text.
<p>Some text in the default font some text in the default font
<span style="font-family: 'comic sans ms', 'helvetica',
'century gothic' sans-serif;">some text in a different font</span>
normal paragraph text again</p>
Produces the output:
Some text in the default font some text in the default font some text in a different font normal paragraph text again
Notice that we have used a list of fonts here, separated by commas. In case a user does not have the first font that the author has specified installed on their computer, the browser then chooses the next font from the author's list. In this case, if the user does not have comic sans on their machine, then the browser will attempt to use the font helvetica. If the user does not have this font either, then the browser will attempt to use century gothic. If even this font is not available on the user's computer, then it will use the generic font of sans-serif. This is not a font in itself, rather it tells the browser to use whatever the default sans serif font has been specified as by the user, or browser itself (usually verdana). Generic fonts are not enclosed in single quotes. You can change your browser's default font settings in the Options dialogue. Other generic fonts are serif (e.g. times new roman), monospace (e.g. courier, fixedsys), cursive (e.g. commercial script) and fantasy (e.g. chiller).
Changing colours of fonts also adds visual appeal to your pages. Changing the font colours uses the following syntax:
style="color: font-colour;"
Font colours can take either of two forms: RGB values (also known as
hex values), or standard names. RBG values take the syntax
#aabbcc. The first two numbers tell the browser the amount of red,
the second two numbers the amount of green, and the last two the amount of blue
(hence R[ed]G[reen]B[lue]). To make things more confusing, the numbers are
hexadecimal values - base 16 - and not base 10. Hexadecimal numbers use the
digits 0-9 and a-f. 00 being the lowest, ff being the highest (equivalent to
255 in decimal - base 10). So no red would be
00, full red would be ff. Black is no colour, so the hex code would be:
#000000, while white is all three colours on full intensity, so it would be
#ffffff. This can be very confusing, so we will concentrate on
using standard colour names. So if we wished to make text red, we could use
the standard colour name of red.
<p style="color: lime;">Here is some lime coloured text. Lime
is pure green, so the hex code would be #00ff00 i.e. 0 red, full green, 0 blue</p>
Produces:
Here is some lime coloured text. Lime is pure green, so the hex code would be #00ff00 i.e. 0 red, full green, 0 blue
Using colour indianred:
This text uses the standard colour name of indianred
Again, we could use the span colour to change only a portion of the text to a different colour.
Here is some colour in the pages default text colour and I have used <span style="color: orange;"> to make this text orange. Span element ended, and the colour is back to the default.
Click here for a full list of XHTML standard colour names
We might wish to change the background colour of a font, in order to give the
effect of it being highlighted, for instance. We can use the style background-color:
colour; to do this.
<p>Normal paragraph text normal paragraph text <span style="background-color:
yellow;">Highlighted text</span> normal text again.</p>
Gives us:
Normal paragraph text normal paragraph text Highlighted text normal text again.
XHTML 1.0 Quick Reference v1.0 © 2005 Samira Pandor