logo for building-a-web-site.com
Home
Blog
Overview
Web Design
Building Pages
Make A Template
Getting Traffic
Keywords
Free E-Books
Sitemap
Subscribe
Contact Us
Latest News
leftimage for building-a-web-site.com

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