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
wysiwyg 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 some styles in
the table.
You'll need to get into the HTML source code to link to the CSS classes
and make them work. If you've followed the complete template tutorial
you'll have already done this. If you haven't, here's how it's done.
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">
The
starting div to apply the "center" style to center the main table.
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
any table you want without borders.
You'll have to search the HTML source code to find the table you want
without borders. It
will
start with a <table>
tag (which may actually be something like
<table
style="width: 650px;" 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. If it doesn't, see
below.
You'll have to do the same with any other CSS classes you create, for
example the .align table
class I made to stop the problem of every table on the page being
centered by .center
and .center table, which
is explained in aligning
the CSS HTML table.
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.
The
CSS stylesheet can have other frustrating problems. In KompoZer,
sometimes the stylesheet doesn't appear to update. You can create a new
style rule but it reverts to the previous stylesheet you saved minus
the new style rule. Try again.
I just tried my instructions exactly as written and the border I was
trying to get rid of stubbornly stayed there. I moved the borderless table
class to the top of the stylesheet, ahead of all the other styles, and
the border disappeared. I moved the borderless table
class back to the bottom of the stylesheet and the border stayed
disappeared. Maybe things just hadn't updated properly.
Be prepared for a few frustrations while you're working with
stylesheets. They're worth the trouble though.
NOTE:
If you jumped to this page from "Making CSS Table Borders", make sure
you go back to Linking Your
HTML Page to the CSS file.
Next Page:
Adding
virtual includes for easy site wide updates
Return
from Link to a CSS Class
to the Web Template
Overview
|
