Education

Skip side navigation

Adobe Web Tech Curriculum

Unit 4: GoLive, (X)HTML, and CSS

Lesson 4.3: Cascading Style Sheets 1

External Style Sheets

External CSS

An external style sheet is simply a stand-alone text (ASCII) file with a .css extension. For example, the CSS file used on this course website is named "adobe_style.css."

Since CSS files are not HTML files, their contents do not need to be enclosed in html tags or have head and body sections. They simply start with the first element for which you wish to set a style.

CSS files use a syntax similar to that of the style element discussed previously, e.g.:

h1 {property1: value1;
    property2: value1,value2;
    property3: value1;
   }

Note the following:

1. First, you identify the element for which you are setting a style (in this case, it is the h1 element).
2. The style properties are completely enclosed inside curly braces ({...}) following the name of the element.
3. Styles are set with property:value pairs; each property is separated from its value by a colon (:), while the pairs are separated from one another by semicolons (;).
4. Several properties may be specified for an element at the same time.
5. A property may have more than one value.
6. The space after the colon is not required (but makes it easier to read).
7. The final semicolon (e.g., the one after property3's value1 in the example above) is not required, though it is recommended (in case you want to add another property later).

8. Comments may be entered using the following syntax:

   /* comment goes here */

   So, for example, if I want all my h2 headings to be large, blue Arial (or other sans serif font), the h2 element in my style sheet will look something like this:

   h2 {font-family: Arial, sans-serif;
    
    color: #083194; /* dark blue */
   }

You can even include more than one tag name in a specification if it's more efficient to do so. For example, if I want all my headings to be dark blue and Arial, I could lump them all together to specify those properties, then create individual specs for the properties that differ among the headings (in this case, the font sizes):

h1, h2, h3, h4
   {font-family: Arial, sans-serif;
    color: #083194; /* dark blue */
   }
h1 {font-size: x-large;}
h2 {}
h3 {}
h4 {}

Linking External Style Sheets to HTML Documents

Once you've created an external style sheet (a .css file), you can link to it from as many different HTML documents as you wish. Let's say you've named your CSS file "style1.css" and you want every page on your site to use that style sheet. In each HTML document's head section, usually after the title line, insert the following line:

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

Note the following:

1. The rel="stylesheet" means the referenced CSS file is related to the HTML document as a style sheet.
2. The href="style1.css" gives the path and name of the CSS file.
3. The type="text/css" tells the browser that the referenced file is a text file which follows CSS conventions.

Go to page: | Lesson Home | 01 | 02 | 03 | 04 | 05 | 06 | 07 | Printable Version of Lesson |

| Course Home |

---

Copyright © 2000-2004 ID 4 the web. All rights reserved.