Photoshop Tutorials, Flash Tutorials, 3Ds Studio Max Tutorials, Web Design Tutorials

Highlight: Below, first we learn how to define individual tags with multiple definitions using the Cascading Style Sheets, and then we learn how to include common components on multiple web pages with minimum effort.

We packed up with external Cascading Style Sheets in the previous section, and I had mentioned like a sage that their could be a point in your life when you would like to implement different CSS definitions for different sections of the same HTML page. I understand that as you go through these HTML gospels, you're growing wiser and wiser, and your unquenchable thirst for wisdom is attaining new heights. Good!

We use the CLASS attribute to render different CSS definitions to same tags. Ok, before we move ahead, today I read in an article that tags in an HTML file should be used in small caps so that they can be used in sync with the emerging trends like XML etc. So small caps from now on.

Supposing, in one section, we want <a> </a> to look purple, and in another, we want <a> </a> to look black. If we do it in the usual

a { font-size : 10 pt; font-family : Arial; font-weight : bold; color : Purple; text-decoration : none; }

a:hover { font-size : 10 pt; font-family : Arial; font-weight : bold; color : Purple; text-decoration : underline; }

manner, we'll only have a purple colored <a> </a> tag because the definition is applied universally. So what do we do. We uses "classes" in this manner:

a.sec1 { font-size : 10 pt; font-family : Arial; font-weight : bold; color : purple; text-decoration : none; }

a.sec1:hover { font-size : 10 pt; font-family : Arial; font-weight : bold; color : purple; text-decoration : underline; }

a.sec2 { font-size : 10 pt; font-family : Arial; font-weight : bold; color : black; text-decoration : none; }

a.sec2:hover { font-size : 10 pt; font-family : Arial; font-weight : bold; color : black; text-decoration : underline; }

If you're the noticing type, you'll notice the use of sec1 and sec2, which we can take as the two sections. We execute these definitions in the HTML page somewhat like this:

<a class="sec1" href="http://www.hereforever.alive.org">To see the site of the immortals, click this purple text.</a>

<a class="sec2" href="http://www.goneforever.dead.org">To see the site of the dead, click this black text.</a>

Let's now life the CSS affairs and move on to the SSI - Server Side Includes.

Although in the real world, it depends on the guy/girl managing your server whether you can use the SSIs or not, assuming you can use them, you should know how and why to use them. First, why?

The use is somewhat akin to the external CSS. One change, and it is reflected through the entire web site, even if there are thousands of pages.

The ideal use is the navigation bar. Of course you know that every web site deserving to be called a web site must have a navigational system so that you can explore it in an amiable manner. On this web site - http://www.Bytesworth.com - if you can see those gray buttons on the right hand side, they help you navigate through hundreds of information pages.

To facilitate hurdle-less navigation, these buttons should be on every page, so that you can immediately click to the section of your desire, irrespective of where you are loafing around.

This is achieved by including the line

<!--#include file="nav.inc" -->

Where "nav.inc" is some file you deem fit to include. The extension "inc" does not have any technical implication in this case - you can have any extension. Whatever code is there in the included file, gets included in the HTML file. So wherever you want to use the include file's content, append the above line where you want the output to appear.

There is another way to include file such as <!--#include virtual="nav.inc" -->, but for the time being, you can do without it.

Including a navigation bar is not the only utility of the SSI's. You can come up with complex ASP and CGI codes to include in your page, but that is beyond the scope of this tutorial, at least at the moment.

Another thing to keep in my mind while making pages that are destined to have included files in them: there extension should be SHTML rather than HTML or HTM. This extension informs the ignorant server that the file being loaded is going to use the SSIs.

In the next section, we are going to deal with a navigation bar, and how to use tables (remember them?) for it. We'll also learn how to define bulleted list.

About the author:
Amrit Hallan is a freelance web designer. For all web site development and web promotion needs, you can get in touch with him at http://www.bytesworth.com. For more such articles, visit http://www.bytesworth.com/articles and http://www.bytesworth.com/learn You can subscribe to his newsletter [BYTESWORTH REACHOUT] on Web Designing Tips & Tricks by sending a blank email at Bytesworth-subscribe@topica.com