CSS #3 External Style Sheets

 

There are three methods for applying styles to a web page, inline styles, embedded styles and external style sheets. With external styles you create all of your styles in one document and then apply these styles to as many pages as you like. Changing just the one style sheet changes all web pages that use that style sheet thus you can affect an entire web site with just a few changes.

There are two steps in implementing external style sheets, first you must create the style sheet document. Second you must create a reference to that external style sheet in each of the web pages to which you want those styles applied.

1. Creating the external style sheet:
Use notepad to create a new document and save it as css3.css. The .css extension makes this document a cascading style sheet. Create a series of style statments to define your styles. Each line will have a selector, a property and a value. Multiple properties are separated by semi-colons ; The property and value will be found within {    }.
If you are not sure what to write look at your notes from day 1 from the CSS article or refer to the What is CSS document  or refer to the W3C Tutorial.

Here are the styles you need to define:

1. Make the background for the body aqua.
2. Make the text color of all paragraphs darkgreen, serif as the font and make the font bold.
3. Make the h1 and h2 headings centered and use the fantasy font.
4. Make the horizontal row blue.
5. Make the table heading font white, georgia, larger and centered. Make the background teal.
6. Make the table data font verdana, black and bolder with a yellow background.

2. To apply this external style sheet you must place a link in the head of the document that refers to this sheet.  Here is the syntax for this link:
<link rel="stylesheet" type="text/css" href="nameoffile.css" />

Open the css3.htm document and save it in your css folder. Add the link to your css file in the head of the document and observe the changes that take place.

Create another external style sheet and apply your own styles. Show both style sheets and the results to your instructor for teacher check.