How To Link Your HTML Page And A CSS File

This page tells how to link the HTML and CSS files. It's part of a web page template tutorial, designed to take you step by step through the process of creating your own customizable web template.

So far, we've used an HTML table for the layout, and done styling with CSS. The CSS styles are currently listed in the header of the web page source code. That means it has to be repeated on every page, and you would have to change the styling on every page individually. Not Good!

So we can update styles on every page at once the CSS styles need to be in a separate file that every page links to. That is what we'll do now. It's quite easy.

For this tutorial I'm using KompoZer, a free wysiwyg web page editor.

Saving The External CSS File

If you've followed the template tutorial so far, you'll have started the process of creating style rules by clicking on the palette icon in the top menubar of the CSS editor. That creates an internal style sheet, which we now need to change to an external style sheet.

Start up KompoZer, open your web template, then the CSS editor. (Go Tools, then CSS editor).

Select Internal Stylesheet in the left pane if it's not already selected.

In the right pane click on the button that says Export stylesheet and switch to exported version.

A dialogue box will open and you can browse to the folder you want to save the file in. That will probably be the same folder you save your template in, or in a folder you've named something like "support-files" in the folder your template is in.

Name the file with a .css extension e.g. mywebstyles.css then save it.

Converting the internal stylesheet to a linked external stylesheet.

For the template I've called the stylesheet "stylesheet-about-armidale.css" so I won't confuse it with any other stylesheet I've made.

If you check the HTML source code now you'll see all the CSS commands that were in the header section of the source code have gone, and there is now a link to the external file.

The link in the source code to the external style sheet is highlighted

Linking To An Existing External CSS File

Sometimes you may want to link to an existing stylesheet that you have. If that's the case, click on the drop down menu associated with the palette icon in the top menubar of the CSS editor. Select Linked stylesheet, click the  Choose File button that appears in the right pane, then browse to your existing CSS file and select it.

Then click on the Create Stylesheet button.

You'll see the name of the linked stylesheet appear in the left pane.

Linking In The HTML Source Code

With the above two methods KompoZer will automatically create the correct link in the HTML source code.

You can also create the link in the source code yourself or check the link in the source code.

In KompoZer you get to the source code by clicking on Source at the bottom left of your monitor.

Towards the top of the source code there will be a header section that is between the <head> and </head> tags. You'll find the page title, description and keyword meta tags there, and that is where the CSS link goes. Generally, it is placed just before the closing </head> tag.

The link is written as follows where mywebstyles.css is the name of the CSS stylesheet file:

  <link rel="stylesheet" href="mywebstyles.css"

You can name your stylesheet whatever you want of course.

If you're using KompoZer or another web page editor with a built in CSS editor you won't need to write the link in the HTML source code yourself, you can do it through the CSS editor.

Next Page: Linking CSS commands to part of a web page

Pages In The Template Tutorial

Return from Link HTML and CSS Files to Creating A Web Template

Return to the How To Make A Website home page