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.
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 about-armidale.com 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
Sometimes you may want to link to an existing stylesheet that you have. If that's the case, click on the drop
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
You'll see the name of the linked stylesheet appear in the left pane.
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