How to Link External CSS to a Page

To link an HTML page to an external Cascading Style Sheet (CSS), just insert a single line of code into the head of your page that references the name and location of the external CSS file relative to the root level of the server on which the site resides.

The line of code for the link must be placed somewhere between the opening and closing <head> tags of every HTML page on your site that you want to be styled with it.

When the filename of the CSS is entered accurately in the HTML file using the correct link syntax, the link code provides instructions to the browser about how the CSS style information should be interpreted and applied to the page, which in turn determines how the page appears in the browser.

Here’s an example of a link to an external CSS file with the filename main.css, where the file that is being sourced uses the href attribute of the link tag, which is an unclosed tag in HTML:

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

When the link code is added to an XHTML page, the tag must be closed by adding an extra space and forward slash before the end:

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

The other attributes within the <link> tag besides the href are required to help the browser interpret the data on the linked CSS file:

  • The rel attribute sets the relationship between the original document and the linked file, and it identifies the linked file as a style sheet.

  • The type attribute specifies the type of style language being used within the linked file, which in this case identifies that the linked file is written in “text/css” format.

For consistency, try to place the CSS link in your web pages in the same location within the code from page to page. For instance, you might want to add the link tag directly following the last meta tag, or place it right above the closing </head> tag. Being consistent can help you quickly find the tag should you ever need to modify it.

Besides the placement of the link within the HTML pages that use the external CSS file, you should also pay some attention to where the CSS file(s) is located relative to the other files within the site.

Most often, each site has just one CSS file, and that file sits at the root level, which is just a fancy way of saying that the CSS file is in the same location as the index.html file, which is the home page for your site.

The root level refers to the ground floor of your site, whether it’s a local copy of your site sitting on your computer in front of you or a copy of the site located on the remote host server. With most sites, the home page sits at the root level along with an images folder and all the other main pages of the site.

For larger sites, some designers create subfolders at the root level to house other things such as external JavaScript and jQuery files, external CSS files, CGI scripts, or groups of pages that fall into a similar category (for instance, all the pages relating to a company’s products or services).

Should your site require two or more Cascading Style Sheets (perhaps one for all the pages and a second for a handful of pages that will be printed), it may be beneficial for you to create a separate folder called css at the root level of the site and then save those CSS files together inside it.

You may then access each CSS from that location, providing that the href of your CSS link indicates the new location of the folder along with the filename:

<link href="css/main.css" rel="stylesheet" type="text/css">
blog comments powered by Disqus
Advertisement

Inside Dummies.com

Dummies.com Sweepstakes

Win $500. Easy.