Cascading Style Sheets

What are they and why use them?

A style sheet is a file which stores the set of rules for your required text colour, font size, etc, for different features of your webpage. For example, if you want all the h1 headings of your web pages always to be the same height, say 36 point, you can save the following statement to a file called style_basic.css

		h1 {font-size: 36pt}

The following statements in a css file specify that paragraph text is in font size 13 point and the left margin is 50 pixels.

		p {margin-left: 50px}
   	        p {font-size: 13pt}

Once you've typed in your list of CSS rules, save the file to the same folder as the web page which refers to it. To ensure that your web page refers to the style_basic.css style sheet, include the following XHTML statement in the <head> section of the web page.

		<link rel="stylesheet" type="text/css" href="style_basic.css" />

Of course, you can choose any name for the CSS filename, as long as the file extension is .css

This is the style sheet for the page you're looking at now: Click here to view file style_basic.css

This is the xhtml for the page you're looking at now: Click here to view file css.html

Click here to validate your CSS

IMPORTANT: To view the XHTML resources linked to from this page, you must use the Firefox browser. If you use Internet Explorer, you will not be able to see the XHTML, only what the XHTML would display in a browser. USE FIREFOX!

IMPORTANT: If you're reading this page from an Internet Explorer browser window, you may not be seeing the resources in the manner intended by the instructor. Use the Firefox browser to view these pages. Firefox is installed on all PCs in Coquitlam College, and students should install Firefox at home. Google firefox to get your free copy at home.

PLEASE NOTE: There are three ways to add style to a web page. You may link your web page to an external style sheet (a file ending in the extension .css). You may also place style statements between the <style> </style> tags in the head section of your XHTML page (view the source of this page: http://www.annedawson.net/about.html for an example of this). The third way to include style to a web page is within a single XHTML line. These are known as 'inline' CSS statements. In fact, the p tag that starts this paragraph includes style to align the paragraph to the left of the page. You should be aware of the fact that inline style takes precedence over any internal style statements typed in the head section of an XHTML document. Internal style statements take precedence over any external style statements stored in a linked external CSS file. It is possible, within the same XHTML document to link to an external CSS file and at the same time have internal (head section) style statements and also have inline style statements. In this case, inline statements override internal style statements which override external style statements.