 |
|
How To Link Your HTML Page To The CSS File
This page tells how to link the HTML and CSS files together to get them
to cooperate and work together in harmony. 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. Now
it's time to link the HTML and the CSS stylesheet together.
For this tutorial I'm using KompoZer, a free wysiwyg web page editor.
Saving The External CSS File
If
you've followed the 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.
Linking
To An Existing External CSS File
If
you have an existing CSS file you want to link to, 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,
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.
Return
from Link HTML and CSS Files to Creating A Web Template
|
|
