CASCADING STYLE SHEETS AND SERVER SIDE INCLUDES

 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 to look purple, and in another, we want 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 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:

To see the site of the immortals, click this purple text.

To see the site of the dead, click this black text.

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



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 , 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

 Amrit Hallan

More Articles 

10 Web Design Tips For A Professional Looking Niche Web Site - Andre Anthony
Web site design is a critical element in niche marketing. If you want to build your reputation as a Professional in your niche, you need to project a professional image from the moment your visitors reach your web site. Like it or not, first...

Making the most of your webserver - Gareth McCumskey
When a company has a site they wish to host somewhere, especially small businesses with limited funds, they normally take advantage of special rates available from a hosting provider. There is nothing wrong with that, but it can cause some problems...

The Wonders of Content Management Systems - Halstatt Pires
As you get serious about your web site, your time will become invaluable. A content management system is the best way to maximize your efforts What A Content Management System Does for You A good CMS system will allow you to update can entire...

Website Templates - Nelson Bort
Website Templates Looking to establish an online presence? Then, your most affordable solution is to buy a web template. It is important to determine what kind of templates are there in the market before you proceed to but one. The following is...

The Best and Easiest Google-Friendly Change to Your Web Site - Robert Plank
No matter who you are or how much you pay for web site advertising, free search engine traffic is probably responsible for a big part of your business. So why make your web site so hard for search engines to figure out? Luckily, it seems like in...

Understanding Computer Graphics Formats - David Manson
Computer graphics can add life to any project but using the wrong format can mean that you could end up with a poor quality image or large file. Computer store images in different ways, as a bitmap where image information are stored in pixels or...

Web Design Is Not For The Squeamish: 9 Things You Should Know Before Designing A Website - Diane Dickler
The internet has become an integral part of our lives. Everyday more and more websites are going online. With the advent of online sitebuilders included with many hosting packages, anyone can easily create a web presence and feel comfortable...

Learning HTML or use Professionals? - Ash Gilpin
Hello everyone. This article was written to help establish web sites that provide interesting materials, resources and/or services that relate to web design, web hosting and search engine optimization. As you all might know, there are many...

How to customize web templates on your own to create websites that work - Mark P
Web templates are raw materials that need to be refurnished/edited to be published online. Editing web-templates could include content insertion, graphic insertion/modification, inserting company logo, changing styles, changing links, changing...

Web Designer's Guide to Search Engine Optimization - Sitecritic Net
From a search engine point of view, the perfect webpage has no graphics, no scripting, no tables...etc but just alot of normal, plain readable text. You can just take it that plain text is the food for search engine spiders. Therefore, the more...

Effective Website Design - Julie Martin
One of the most commonly overlooked elements of an effective E-Business is the very thing that is essential to your success. Something as simple as the design of your website can make or break your business. Each consumer has their own set...

Creating Your Own HTML Email Templates in Outlook - GlobalFusion
If you want HTML Emails in Outlook to look the way YOU want, and your designing them in DreamWeaver - Heres How: Step 1 When in Outlook (Pro), Go to the Tool | Options Menu. Step 2 Click on the Mail Format Tab along the top of the current...