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
(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.cssp { 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.cssp { font-style: italic; } The display of style-test.html is shown below. ![]() The link element and @IMPORT rule work in IE6, IE7, and Firefox. Related Tutorials: |