Improve Site Performance Increase Site Traffic Monitor Site Uptime Webmaster Resources NetMechanic Home Looking For Help? Partner Programs Privacy Policy Contact Us Press Room
NetMechanic Home LOGIN | HELP | ABOUT US | PRODUCTS | SITE MAP
NetMechanic Menu
Over 52 Million Web Pages Tested!     
 
Positioning tips.
search engine optimization story search.
Search for:


Your Email:

I would like to receive my newsletter in:
HTML format
Text format


Increase traffic.
Volume 8 (2005)
   September
   June
   April
   March
   January

Volume 7 (2004)
   November
   September
   July
   June
   May
   April
   March
   February (Part 2)
   February
   January (Part 2)
   January

Volume 6 (2003)
   December
   November (Part 2)
   November
   September
   August (Part 2)
   August
   July (Part 2)
   July
   June (Part 2)
   June
   May (Part 2)
   May
   April (Part 2)
   April
   March (Part 2)
   March
   February (Part 2)
   February
   January (Part 2)
   January

Volume 5 (2002)
   December (Part 2)
   December
   November (Part 2)
   November
   October (Part 2)
   October
   September (Part 2)
   September
   August (Part 2)
   August
   July (Part 2)
   July
   June (Part2)
   June
   May (Part 2)
   May
   April (Part 2)
   April
   March (Part 2)
   March
   February (Part 2)
   February
   January (Part 2)
   January

Volume 4 (2001)
   December (Part 2)
   December
   November (Part 2)
   November
   October (Part 2)
   October
   September (Part 2)
   September
   August (Part 2)
   August
   July (Part 2)
   July
   June (Part 2)
   June
   May (Part 2)
   May
   April (Part 2)
   April
   March (Part 2)
   March
   February (Part 2)
   February
   January (Part 2)
   January

Volume 3 (2000)
   December (Part 2)
   December
   November (Part 2)
   November
   October (Part 2)
   October
   September (Part 2)
   September
   August (Part 2)
   August
   July (Part 2)
   July
   June
   May
   April
   March
   February
   January

Volume 2 (1999)
   December
   November
   October
   September
   July
   June
   May
   April
   March
   February
   January

Volume 1 (1998)
   December
   November
   October
   September

 

CSS Tip:
Incredible Shrinking CSS Rules

by Larisa Thomason,
Senior Web Analyst,
NetMechanic, Inc.

  
November 2004
Vol. 7, No. 11
 • Promotion Tip
 • CSS Tip
 • Domain Name Tip
  

It really isn't possible to use "just a little" CSS on a Web page. Once you see how easy they are to code and enjoy the control they give you over design and display, you'll use them more and more. Soon the page's HEAD section (or external style sheet) is weighted down with classes, IDs, and bloated style rules.

They become as difficult to manage as those darn FONT tags after a while. Streamline your pages even more by putting the "cascade" back into CSS.

Complex Style Rules

Let's start by defining a few CSS rules.

First, we set the BODY definition to control the basic font family, color, and size. We also apply those same rules to TABLE tags to make sure Netscape displays our tables correctly.

Next, we define our H1 and H2 tags to apply a different text color, add a background, and control margin spacing around them.

Just for fun, we throw in a couple of classes to handle the exceptions to our rules.

Here's how that looks:

<style type="text/css">
    body, table, tr, td {
        font-family:arial;
        font-size: 12px;
        color: navy;
    }
    h1 {
        font-size:16px;
        color:maroon;
        background-color:yellow;
        margin: 0px 0px 0px 0px;
    }
    h2 {
        font-size:14px;
        color:maroon;
        background-color:yellow;
        margin: 0px 0px 0px 0px;
    }
    .linkText {
        color:maroon;
        background-color:yellow;
        text-weight:bold;
    }
    .saleItem {
        color:red;
        font-weight:bold;
    }
</style>

These example style rules aren't too complicated yet, but already it's easy to see that there's a lot of duplication. Let's learn how to eliminate much of it.

Mix And Match Shortcut Classes

Note the many common stylistic elements in the above example. The same background colors, text colors, and margin spacing are all sprinkled throughout the page. Hopefully, they repeat throughout the Web site. Consistent color and layout help create the same look and feel on each page. Consistency makes visitors comfortable and comfortable visitors stay longer!

We're going to maintain that consistency more easily by replacing the duplicative style rules with several shortcut classes. That's the "mix and match" part.

The term "shortcut class" isn't a true technical term; we just made it up. But it is quite descriptive. Shortcut classes let you take advantage of a little-used CSS technique: applying more than one class to a page element. Instead of creating a separate class or style rule for each individual element, we can apply multiple styles instead.

We can get the same formatting effects more easily making a few changes to our example style rules:

<style type="text/css">
    body, table, tr, td {
        font-family:arial;
        font-size: 12px;
        color: navy;
    }
    h1 {
        font-size:16px;
    }
    h2 {
        font-size:14px;
    }
    .m {
        color:maroon;
    }
    .bc {
        background-color:yellow;
    }
    .r {
        color:red;
    }
    .hm {
        margin:0px 0px 0px 0px;
    }
    .b {
        font-weight:bold;
    }
</style>

It sure looks different doesn't it? We took each of the common formatting rules and made each a separate class with a one or two-letter name. Simpler is better, but stay descriptive or you'll just confuse yourself.

Note that we did keep the font-size rule for the H1 and H2 tags in the STYLE definition. You could also create classes for each font-size, but it's harder to name and remember those because you should never start a class or ID name with a number.

Look how easy it is to apply these multiple classes:

<body>
<h1 class="m bc hm">Page Title</h1>
<p>Sample text below the page header</p>
<h2 class="m bc hm">Secondary header</h2>
<p>Sample text that goes under the secondary header and <a href="samplePage.html" class="m bc">contains a text link</a> in the body of the paragraph.</p>
<p>Another paragraph that introduces a list of sale items:</p>
<ul class="b r">
<li>1st sale item</li>
<li>2nd sale item</li>
<li>3rd sale item</li>
</ul>
<p>Closing paragraph with <a href="" class="m bc">another link</a>!</p>
</body>

Although both the first and second style examples work in all browsers without a problem, you gain even more flexibility and reduce complexity when you mix and match several shortcut classes.

Check out this Example Page. It shows the style rules applied using the second method.

Looking for even more ways to save debugging time? Use NetMechanic's HTML Toolbox to find and correct coding errors. Toolbox scans your HTML code for errors, browser-specific code, broken links, and alerts you to slow-loading page. Use it every time you make a coding change because even a single mistake can sometimes break a Web page completely.



Rate This Tip:
Not Useful Useful Very Useful   
 
NetMechanic Tools
HTML Toolbox
Browser Photo
Server Check
Search Engine Starter
Search Engine Tools
GIFBot
Newsletter
HTML Tutorial and Tips
Search Engine Tutorial
Accessibility Information
Browser Problem Tutorial

Company Info
Products
About Us
Contact
Advertise
Link To Us
Jobs
Privacy Policy
Partner Programs
Press Room
RSS Feed
Support
 



Powered by Overture!

 
     
 
   
 
     


Keynote Home
Copyright © 1996-2010,
Keynote NetMechanic
All rights reserved.