Saturday, 2 June 2007

Cascading Style Sheets

This week we looked at Cascading style sheets. Have a look at the Wiki post for CSS here CSS is a powerful markup tool for defining colours, fonts, and layout in your web pages. We looked at two different ways of applying CSS styles; embedded and external.
Embedded style, blocks of CSS information inside the HTML document itself.
External stylesheets, i.e. a separate CSS-file referenced from the document.

CSS allows the designer to apply sweeping changes to a web site by simply adding CSS code to a style sheet.

Some examples of code are;
BODY {font-family: Tahoma; color: black; font-size: 10pt; background-color: white}

H1 {font-size: 20pt}
H2 {font-size: 18pt}
H3 {font-size: 16pt}

A:hover {color: red; background-color: white; text-decoration: none}

This code will set the body background colour to white, the text to a black Tahoma font. Heading 1 will be size 20 pt etc, and hyperlinks will be coloured red.

For some examples of CSS style sheets have a look at the CSS Zen Garden. You'll find the link in the LInks list section of this blogg. Also have a look at the W3schools web site for a complete tutorial.

No comments: