Cascading style sheets

If you are targeting a Distinction grade, you must use a cascading style sheet to ensure that your web pages all follow the same rules. Cascading style sheets are like templates, in that they set up how elements will look on the web page. However, unlike templates, they work directly with HTML, the code behind web pages, to change the settings for elements on any page which uses the cascading style sheet. They are used for two purposes:

·     So that elements on web pages will look as much like the author required, irrespective of which browser is being used.

·     To reduce the amount of code used to create web pages. You may think that this is irrelevant because you are using web page authoring software, rather than HTML code, to create your website. However, if you can reduce the amount of code used to create your website, you will also reduce the time it takes for your website to open.

There are three different types of cascading style sheet. These are:

1   External - an external cascading style sheet keeps the rules in a separate file. This means that you can apply the cascading style sheet rules to all pages in the website.

2   Embedded - an embedded cascading style sheet is held in one page and can only apply to the page on which it is held. If you were using an external cascading style sheet to define all of the settings on your website, but wanted one page to be slightly different, you could use an embedded cascading style sheet on that page only, which would let you make your design changes.

3   Inline - an inline cascading style sheet is used to set style settings for one element on a webpage.

You can see that the difference between these three types is how much of your website they affect. We will concentrate on the use of external cascading style sheets, as these are more than enough for this qualification.

Creating cascading style sheets

The interactive tutorials here are for Dreamweaver MX - the version we have in school.

Don't worry if you find CSS too tricky for you at the moment - it is something that is normally "A" level work - or even higher.

The tutorials are from http://www.shortcutlearning.com and are free of charge to use.  There are many other interactive tutorials on this site for Dreamweaver MX - if you get stuck and are not sure how to do something you could check and see if there is a tutorial............