How To Link Your HTML Page To The 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 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
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"
type="text/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
Return
from Link HTML and CSS
Files to Creating
A Web Template
|
