Did You Know?


External CSS

Now that we've learned to write css classes and rules in the head section, it is time to put this to good use. The advantage to using css in an external style sheet is that a single change in your css document will change the style for all linked pages in your website.

For example, right now we can set a rule in the head section of a page to make every <h2> tag in your website blue. If you want to change this to red, you would have to open every webpage in the site to make the change in the head section of every single page.

Instead, we can put the css in one document and simply link each webpage to the one css document. Then changes are quick, easy and take effect across all of your pages with one change.


Creating a CSS Document

To create a CSS document, simply open Text Edit and place the following code inside:

@charset "UTF-8";
/* CSS Document */

h1 { color:blue;}

.box1 { color:red; background-color:black; padding:10px;}

Then save the document as screen.css

We call this screen.css because it will tell the webpages what style to use when displaying webpages on a computer screen. There are other styles such as "print" that can also be defined, but we will not go into that right now.

Linking to Your CSS Document

Once you've created your css document, the next step is to place a link into the head section of each page in your site.

You can also put a paragraph and a div that calls your class in the body section and save this file as test.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">

<html xmlns=""> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

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

<title>Untitled Document</title>

<h1>This Text is Blue</h1>

<div class="box1">This is Box 1 described in screen.css</div>




The screen.css file must be in the same folder as the .html files of your site or you would have to change the pathname in the href attribute.

Launch your test.html file in a browser to see the effect. It should look like this:



Writing the CSS For Your Site

Now that your files are all linked to the external css document (screen.css) you can write any style commands in this document and they will apply to all pages in your site that contain the link in the head section.

Now you are free to write your css code as you used to in the head section, but instead, you now write it in the screen.css document.