WebRef   Sitemap · Experts · Tools · Services · Newsletters · About

home / authoring / style / sheets / multiclass

[previous] [next]

Saving Bytes by Using Multiple CSS Classes on Elements

Developer News OpenOffice 3.2 Lands Amid Critical Changes Red Hat, IBM Firmly in KVM Virtualization Camp Red Hat Talks Up Open Source Cloud Plans

The Current Way

The next major shift came when Cascading Style Sheets began to take off and layers became a popular mechanism for providing layout. CSS Classes were used to handle presentational material. Let us create an example of the typical techniques used with this approach:

View CSS Example 1 (Opens in new window.)

This document weighs in at 1047 bytes and for all intents and purposes renders identically to the tables approach. Quite a savings already! But perhaps a better representation of current thinking would be shifting all style properties to a style sheet in order to separate style from content:

View CSS Example 2 (Opens in new window.)

Shifting all the styles to a style sheet sees the total number of bytes rise to 1139 bytes, an increase over the previous method. However, the advantage here is that all styles are contained in one section, while the content is contained within another section, making the editing of the document far easier. Sometimes you have to lose ground in one area to gain ground in another.

The separation of content from design would typically see the style sheet be linked from the document. However for the purposes of this article, I am presenting the material in one document, so that viewers readily have access to the source code, rather than having to open separate documents.

The New Way

So far I haven't presented anything that hasn't been well advocated in the past, nevertheless it was important to provide some context for what is about to follow.

What is interesting to me is that the newer browsers afford developers techniques that can greatly optimize pages, but as yet haven't made their way into the mainstream of Web development practices.

One such technique is the use of multiple classes on elements. Yes, standards based browsers allow you to apply two or more classes to an element! For example, let's assume we have two custom classes in the style sheet named maintext and center respectively:

.maintext {
   font-family:   "Courier New", Courier, mono;
   font-size:     14px;
   color:         #FFCC99
}

.center {
   text-align:    center;
}

Then what we could do is apply both classes to the same element with the following syntax:

<div id="Layer2" class="maintext center">

The element would render with both classes applied in Internet Explorer 5.0+, Netscape 7+ and Opera 7. But how does this help us when it comes to optimizing the number of bytes used on a page?

home / authoring / style / sheets / multiclass

[previous] [next]

The latest from WebReference.com Browse > Site Contents - - - - - Experts * 3D Animation * Design * DHTML * Graphics * HTML * JavaScript * Perl * XML - - - - - Web Resources * Authoring * Design * Internet * Multimedia * Programming * Promotion - - - - - Services * Interviews * Newsletters * Reviews * Search * Tools Search Engine Optimization: Selecting and Embedding Keywords · Are Google's Language Translation Web Services Ready for Prime Time? · Installing and Using Meeplace, the Business Review CMS Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters >   The latest from internet.com IBM DB2 10 for z/OS: Justifying the Upgrade · Living La Vida Colo: Choosing the Right Colocation Facility · FTC Concerns over Social Media Privacy Linger

Created: November 27, 2002
Revised: November 27, 2002

URL: http://webreference.com/authoring/style/sheets/multiclass/2.html