Referencing an External CSS

  1. Inline CSS, Embedded CSS, External CSS
  2. How to Compose a CSS File
  3. How to Include an External CSS in a XHTML Document
  4. External CSS Tips

Inline CSS, Embedded CSS, External CSS

Though CSS is a completely different language from XHTML, there are 3 ways to use CSS inside of an XHTML page:

Inline CSS only allows you to write individual declarations inside of a XHTML element they modify using the STYLE attribute. Because of its limited usefulness we are not exploring inline CSS in this course.

We've looked at embedded CSS already--this simply requires that you use the XHTML STYLE element in the HEAD of your document, and write any number of CSS rules as PCDATA. This is a good way to start writing your style sheet, but once multiple XHTML pages exist in a site, it becomes more efficient to use an external CSS.

An external CSS is simply a plain text file with the .css extension that contains any number of CSS rules. There are no XHTML elements in an external CSS file. Regardless of the number of pages in a Web site, a single external CSS file can be referenced and included in each of those pages without any redundant CSS:

If we were simply using embedded CSS for each page's style we would have to have the exact same CSS rules in the HEAD of each and every page. Imagine trying to maintain that code! What if you wanted to change one property or rule across all the pages? It's much simpler to have a single external .css file that each page in turn refers to.

How to Compose a CSS File

Writing an external CSS file is very simple. Here's what you must have:

  1. CSS rules only in the file (no XHTML)
  2. A plain text file
  3. The .css file extension

Here's the easiest way to create a new external CSS file from your existing embedded CSS rules:

  1. Select everything between the opening and closing STYLE tags in your XHTML document. Do not include the STYLE tags themselves!
  2. Choose Cut.
  3. Open a new plain text file in your text editor of choice.
  4. Paste the copied CSS rules into your new text file.
  5. Save the file as plain text with the .css extension (e.g. "screen.css")

How to Include an External CSS in a XHTML Document

In the HEAD of each XHTML document that you want to include your external CSS you must write a reference to the target CSS file. There are actually two ways to do this.

Using the STYLE Element with @import

I prefer to reference my external CSS file(s) using the STYLE element. This method ensures that older browsers which may not properly interpret my CSS will simply ignore the CSS altogether; this helps me avoid ugly or unusable renderings of my styles.

Here's the basic syntax where the name of my external CSS is "screen.css":

<style type="text/css">
   @import url("screen.css");
</style>

The value in quotes should be the name of your .css file including any necessary relative paths.

Using the LINK Element

We can use the XHTML element LINK to reference an external CSS file. This method will be recognized by many older browsers.

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

Link the STYLE element; the LINK element needs the TYPE attribute to be "text/css", and the REL attribute to say "stylesheet" just in case! LINK uses the HREF attribute just like the A hyperlink element.

Note that the LINK element has no PCDATA and thus self-terminates.

External CSS Tips

  1. Remember, the STYLE or LINK element must appear in the HEAD element of your XHTML documents.
  2. Use relative paths to target your .css file from other folders in your site. This is a common problem for novices.
  3. You can use multiple CSS files for different media types, such as print, mobile, etc.
return to top