Link to external style sheets

by Guest Contributor | Sep 29, 2003 7:43:00 PM

Takeaway: If you want to use the same styles for several pages, create an external style sheet and link to it from your HTML documents. Here's how.

By Matt Rotter, Charity Kahn, and Paul Anderson

Defining styles in the HTML document is useful if you want to affect only one Web page, but what if you want to use the same styles for several pages--or even a whole site? That's when it makes sense to create an external style sheet and link to it from your HTML documents.

First, create a file called basic.css that contains just this text:

H3 { font-family: Arial; font-style: italic; color: green }

Next, start a new HTML document (call it basic.html), and add a <LINK> element that calls the style sheet in the document's head:

<HTML>
<HEAD>
<LINK rel="stylesheet" type="text/css" href="basic.css" title="style1">
</HEAD>

The <LINK> element's attributes tell the browser to find an external style sheet, that the style sheet is a CSS file, and that the name of that file is basic.css. (This assumes that your style sheet file is in the same directory as your HTML file. If not, you need to supply the directory path in the href attribute.) The title attribute simply gives the style sheet a name to reference. The file basic.css defines the styles in basic.html, so every <H3> element you use in the HTML document will have the green, italic, Arial style defined in basic.css:

<BODY>
<H3>This is a green, italic, Arial H3 header.</H3>
<P>
<H3>So is this.</H3>
</BODY>
</HTML>

You can also merge an external style sheet into an HTML document's <STYLE> element with the CSS @import statement:

<HEAD>
<STYLE type="text/css">

</STYLE>
</HEAD>

The @import statement works much like the <LINK> element, although the syntax is a little different. (See the CSS specification for a list of @import arguments.) In this case, you use url("basic.css") to include the basic.css style sheet. Any @import statements must be listed before any other rules in the <STYLE> element. Note that @import support is buggy in the 4.0 versions of Navigator and Internet Explorer, so you may want to stick with the <LINK> element for a general browsing audience.

Combining Styles

Often, a combination of methods is the best way to apply styles. For instance, a linked style sheet can help you maintain a consistent look and feel throughout your Web site. But if you want a certain page to have additional styles, you can also include styles in the head of that particular HTML document. Or if you want just one section of a page to look different, you might use in-line styles with a <DIV> or <SPAN> element.

You may merge as many external style sheets as you want by using multiple <LINK> elements or @import statements. Where they conflict, succeeding links or imports will override preceding ones, and will themselves be overridden by rules within the HTML document itself. This is where those cascading rules come into play: if two style sheets define competing rules, the innermost style sheet wins.

Matt Rotter and Charity Kahn are software engineers for CNET.com.

Paul Anderson is an associate technical editor for CNET Builder.com.

0 comment(s)

SponsoredWhite Papers, Webcasts, and Downloads

Article Categories

Security: Security Solutions, IT Locksmith
Networking and Communications: E-mail Administration NetNote, Cisco Routers and Switches
CIO and IT Management: Project Management, CIO Issues, Strategies that Scale
Desktops, Laptops & OS: Windows 2000 Professional, Microsoft Word, Microsoft Excel, Microsoft Access, Windows XP,
Data Management: Oracle, SQL Server
Servers: Windows NT, Linux NetNote, Windows Server 2003
Career Development: Geek Trivia
Software/Web Development: Web Development Zone, Visual Basic, .NET

Link to external style sheets

What do you think?

SponsoredWhite Papers, Webcasts, and Downloads

Article Categories