How to Link to a Separate CSS File in HTML page

Posted in Tutorials

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…

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

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…

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

Next

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

Books on CSS

---