What are two ways to link to an external stylesheet?
Author: Deron Eriksson
Description: This CSS example describes how link and import can be used to link to an external stylesheet.
Tutorial created using: Windows XP


Page: < 1 2

(Continued from page 1)

The following HTMLW page references the "style1.css" stylesheet via a link element and "style2.css" via an @IMPORT rule.

style-test.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Style Test</title>
<link rel="stylesheet" type="text/css" href="style1.css" />
<style type="text/css">
@IMPORT url("style2.css");
</style>
</head>
<body>
<p>Howdy</p>
</body>
</html>

The style1.css file is shown here. It applies a yellow background to <p> elements.

style1.css

p { background-color: yellow; }

The style2.css file is shown here. It sets the text color of <p> elements to be red. In addition, notice that it begins with an @IMPORT rule, referencing style3.css. Thus, the style2.css stylesheet actually contains a reference to the style3.css stylesheet.

style2.css

@IMPORT url("style3.css");
p { color: red; }

The style3.css file is shown here. It italicizes the text of <p> elements.

style3.css

p { font-style: italic; }

The display of style-test.html is shown below.

display of style-test.html

The link element and @IMPORT rule work in IE6, IE7, and Firefox.

Page: < 1 2