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


Pages In The Template Tutorial



Return from Link to a CSS Class to the Web Template Overview