 |
|
How To Link To A CSS Class
This
page tells how to link to a CSS class to get your class styles to work
in an HTML web page. It's part of a tutorial on how to make your own
web site template. I'm using KompoZer for the tutorial, which is a free
wysiwig web page designer.
In the previous pages we've created
two CSS classes called .center and .center table. They're use
to center the table in our web template and to set all the styles in
the table.
You'll need to get into the HTML source code to link to the CSS classes
and make them work.
Opening The HTML Source Code
For most styles in your website template just linking to the external stylesheet
is enough. That applies the styles right throughout the web page.
Linking to a CSS class is a bit more complicated. A
class applies to a particular part of the page, or to a particular tag
(such as the table tag). So you need to apply the class just to that
part of the page or just to the tag. You
do that by wrapping divs around the piece you want to style. You'll
need
to get into the HTML source code to do that, but it's not that hard to
do.
Start KompoZer, and open your web page template. So far you should have
an HTML table layout,
and a CSS file.
At the bottom left of your monitor you should see Source. Click on
that to go to the source code.
At
the top of the source code there will be a header section between
<head and
</head> tags. <head> opens the
header section,
</head> closes it.
Below that is the body, between <body> and
</body> tags. The body section is what shows on the web
page.
If
you've been following the tutorial, straight after the
<body> tag
there will be a <table> tag, and in the same way there
will be a
closing </table> tag before the closing
</body> tag.
Applying The Class
The
table those tags refer to is the main table for the template, and that
is what you'll want
to center and apply styles to. You'll need to apply divs between the
body and table tags.
Immediately
after the <body>
tag and before the <table>
tag towards the top
of the page you'll need to type or paste
<div
class="center">
and immediately after the </table>
tag and before the </body>
tag towards the bottom of the page you type or paste
</div>
That will make the ".center" and the ".center table" classes
work. Note that you don't put the dot in the div statement.
Fixing The Problems
Wouldn't it be boring if life was straightforward! If you've used CSS table borders,
you'll find that every table on the page has a border, including the
table around your navbar, the text table in your template layout and so
on. It's bordering on ridiculous.
So you'll need another class
for tables without borders which we also created on the CSS table
border page and called .borderless table.
You'll need to use divs again to apply the borderless table class to
tables.
In the HTML source code find the table you want without borders. It
will
start with a <table>
tag (which may actually be something like
<table
style="width: 780px;" border="0" cellpadding="0" cellspacing="0">
or similar) and it will end with </table>
Immediately before the opening <table> tag type or paste
<div
class="borderless table">
Immediately after the closing </table> tag, type or paste
</div>
That should solve the excessive borders problem.
Still Have Problems?
If
you still have a border around the table you're trying to
remove
it from, or you get other strange effects, check your source code
carefully.
You may have several tables on the page and the tags
you've put the divs around may belong to two different tables. You'll
have to go through the code and make sure you get the divs in the right
place.
Return
from Link to a CSS Class
to Creating Your
Own Website Template
|
|
