Why Cascading-Style-Sheets?

CSS, more properly known as "Cascading-Style-Sheets," is used throughout JewelryLuv.com but why? In fact, we don't even employ a single TABLE tag. The reasons are outlined by the bullet points below and used as sub-headers for the rest of this document. We use CSS because it gives us:

Preface

This article gives a high level overview as to why a site would want to employ CSS to layout their pages.

Some History

CSS has been around for a long time; however, only since 2004 have web designers and web browsers matured enough to be able to use it extensively. If you have the notion that CSS is only useful for styling text, you are in for a real surprise! It was the advent of open source HTML rendering engines such as Gecko and KHTML that has spurred the creative genius of today's avant garde web designers. Now, anyone using the Mozilla Firefox or Safari web browsers can correctly display the most innovative CSS designs.

Microsoft's Internet Explorer has lagged woefully behind. This is perhaps the biggest barrier to using CSS in web development because Internet Explorer is still a very popular web browser. Luckily, Internet Explorer supports just enough CSS that there are a veritable bag of tricks the web designer can employ to make Internet Explorer behave correctly - JewelryLuv.com is a commercial site that is a testament to this fact.

The second biggest stumbling block to widespread CSS acceptance is the learning curve. Many designers have already learned how to make web sites without even using CSS, or only using it style their fonts. It is sometimes hard to argue with an "if it ain't broken don't fix it" mentality, so if that sounds like you, don't even bother reading the rest of this article. To add insult to injury, not only do you have to learn the new mindset of CSS development, you must also learn the arcane tricks to make IE behave properly. This is one STEEP learning curve; but that's a good thing because it means you'll learn a great deal in a short amount of time.

What is wrong with TABLE tags?

They are rigid. Did you catch that? Slow down and read it again — "they are rigid." Table tags concretely set up a structure for a page. If you have ever worked on a bulletin board site and wanted to change the layout, you know exactly what I mean. The data that you want to display, such as topics, names, addresses, etc. is all mixed up with TD and TR tags. It is not a trivial endeavor to go in there and flip columns around.

Tables can get hairy, fast! Sure, it's relatively easy enough to learn how to use Tables, even though they have their fair share of esoteric "gotchas" that you must learn. It is even pretty straightforward to create a complex layout to position all elements on a page just like you want them. But, you must work with ROWSPAN, COLSPAN, and many other issues to get the right effect. If you go back to that bulletin board design just two weeks later, it will take you a good chunk of time just to make sense of all those nested table tags. That's what I mean by hairy, it is just way too hard to maintain a complex layout with tables.

Flexibility — make global changes instantly

Picture this - you have a web site with hundreds of HTML pages (both dynamic and static pages) but you want to markedly and drastically change the appearance of all the pages in about 2 hours or less. Now not just the colors and fonts, but arrangement of elements on the page as well. Tough job isn't… or is it? With CSS this is a straightforward proposition. You need to design your entire site using CSS and import the same CSS properties file in all pages. One update to that CSS properties file, and the entire web site will reflect your creative genius.

In the following examples, take a careful look at the HEAD tag and where it includes the CSS properties file which looks something of the form:
@import url("http://www.jewelryluv.com/jewelry-style.css");
because, believe it or not, that is the only difference amongst the examples.

Example 1 - Standard Home page. Click here to see the regular home page of Jewelry Luv. This link opens in a new window so when you are done looking at it, simply close the window to return here. Notice the placement of the navigational tabs and the general look and feel of the page.

Example 2 - Gothic Home page. Click here to see what a goth version of our page might look like. Notice how the navigational tabs have changed! Their placement and their design. Notice how the fashionable lady graphic is not shown. Remember, we changed nothing in regards to the HTML of the page. All we changed was the CSS properties file the page was using. It is not a perfectly beautiful example but it illustrates the point. It looks a bit better in FireFox and Safari than Internet Explorer, but I only spent 16 minutes to make this new look and feel. If I spent another hour I could make it look better in all browsers.

Example 3 - No CSS properties defined. Click here to see what this exact same home page looks like without any definitions for the CSS properties. Notice how the navigational tabs are nothing but an unordered list in HTML. It is the defined layout in the CSS properties file which turns this HTML element into a series of tabs. This view is also what a web spider like Google will "see" when they crawl your site.

Creativity — make dynamic content that looks static

Many sites employ javascript to create clever dynamic actions. Problem is, not everyone uses javascript and no spiders that I know of (such as Google) will spider content created with javascript. By using the "hover" attribute of CSS, it is possible to create many flyover effects that WILL be spidered. Using CSS this way is wicked fast too! A cool example of this is the merchandise thumbnail images here on Jewelry Luv. Just drag your mouse over the images of merchandise at this link here and watch the descriptive text boxes appear. Now go to this link here to see how a spider like Google will view those dynamic text boxes. We cover this "flyover gallery" technique in a tutorial of its own.

Consistency — make each page of your site look similar

When your site is designed to make use of a CSS properties file, you can designate a default set of fonts and other preferences that will automatically be invoked throughout your pages. That way, you don't even have to think, just focus on writing content. For example, if you want your paragraph tags to have a margin of 100 pixels on the left and right, you just define it once in the CSS properties file and then every time you use a <P> tag it will carry through. Another example, if you want the default font to be Lucida Grande, you simply define it in the CSS properties file and it will carry throughout.

Separation — differentiate between layout and content

Clever programmers have discovered that any time it is possible to separate and logically isolate different pieces from a project, by all means do so! There are two reasons for this. The first is that breaking a single large project into smaller pieces makes it easier for our human brains to manage information. We can focus on one smaller task, without worrying about the bigger picture, then later tie all the pieces together. The second reason, perhaps even more important reason, is that you can update one piece of the puzzle without it getting in the way of other pieces.

With CSS, it is possible to design the layout in the CSS properties file and put your data elements such as merchandise, names, addresses, etc in the HTML file. This saves you from mixing up hoards of nested <TD> and <TR> tags with your content data that you want to present on the page. When it comes time to modify the layout of your pages, you can leave the HTML alone (or modify it very slightly) and focus entirely on the CSS properties file. This is worlds easier to manage and will save you countless gray hairs. I can't tell you how many times I went crazy tracking down a missing TABLE related tag in the dark ages before CSS.

Case in point: most web developers program in a scripting language of one sort or another. PHP, JSP, and ASP are three common technologies. Scripting languages are easy to pick up and start programming with, but don't necessarily lend themselves easy to maintain source code. This is because usually the layout, the content, and the logic are tied up in one file, a .jsp file for example.

At Jewelry Luv, we recognize and separate our web development into three parts:

It may not be possible to separate the Content from the Logic in a scripting language, such as JSP, but you can definitely separate the Layout in a CSS property file.

Speed — smaller HTML files and faster rendering

You may not realize it, but nested TABLE tags add a fair amount of bloat to the generated HTML that must be downloaded. If your HTML currently uses <FONT> tags, changing to CSS will cut down on the generated HTML's file size drastically.

Bare in mind that when you put your layout into a CSS properties file and include it into your HTML pages like we've done at Jewelry Luv, that CSS file gets cached like any other page and reused across all pages on your web site. There is no way to "cache" nested TABLE tags so they must be downloaded over and over again.

Most web browsers try to display parts of a web page as they are downloaded. For a site with a lot of content and a user with a slow Internet connection, they will start to see bits and pieces of a page as they come across cyberspace. The exception to this is TABLE tags. A table must be downloaded in its entirety before it gets rendered. If you have ever done a database query over the web that returned a great number of results and it appeared that it took forever for the results to come up, chances are your browser was waiting for the terminating TABLE tag to appear before displaying the contents of the huge table. The developer could rewrite their code to make each row a table of its own without any tables nested around it. Programming in this way, its row of data will be displayed on the user's computer as it is downloaded without waiting for the entire result set. Alternatively, the web developer could avoid TABLE tags altogether and use a CSS solution to display results immediately.

Summary

We hope we have peaked your curiosity regarding CSS and motivated you into experimenting with CSS on your own terms. With any luck, this article has got you hungry for concrete examples of how you can learn and use CSS on your own site.