How to Link to a Separate CSS File in HTML page

Posted in Tutorials

Tweet This Share on Facebook Bookmark on Delicious Digg this Submit to Reddit

In the last tutorial we created an embedded CSS style sheet to stylize a striped table.  However the prefer method is to have a separate CSS file.  Now we show you how to use a separate external CSS style sheet to do the same thing.

1. Taking the contents of our CSS rules, we put them into a separate file named style.css…

separate CSS file

separate CSS file

2. As for our HTML file which we will call index.html, we remove the CSS code and add a link tag instead …

link to external CSS file

link to external CSS file

The link tag looks like …

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

where the href attribute can be a relative or absolute path to the external CSS file.  Put the “rel” and “type” attributes as shown to indicate that it is linking to a CSS stylesheet.

3. When previewed in the browser, we get the same results as before…

Fnished CSS Striped Table

Finished CSS Striped Table

See live code example and use the browser “view source” command to see the code.


JQuery can also be used to make a striped table. See tutorial.

Books on CSS