The Holy Grail of CSS is to separate the content of a web page from the instructions that control what it looks like. This makes it much easier for various devices to display the web page correctly. The same page would display correctly on all standard web browsers (Internet Explorer, FireFox, Opera, Netscape, etc.), and devices used by persons with a handicap, cell phones, other devices, and yet-to-be-developed interfaces. The web site designer would not have to make separate pages for these devices. However, reality is different and here in the real world CSS does not do all these things. It does have enough positive points to make it worthwhile to learn and incorporate it into your web pages.

Editorial Note: SiteProNews will not be published on Monday, December 25th, Friday, Dec. 29th or on Monday, January 1st.

There are multiple ways to control how something looks on a web page. The color, size, and font used for a headline or for a paragraph of text can be defined with in-line styles and tags. The term "in-line" means that the commands for controlling the color, size, and font are mixed in with the content. This makes the source code for the page cluttered and hard to read and edit when you want to update it or fix something. Also, because you're repeating the same commands over and over throughout the page, the file size of the page gets larger and hence slower for those browsing your site.

As opposed to in-line styles, CSS is not repeated throughout the page. CSS can be defined in the head section, or put in a separate file and referenced from the HTML file, or both. CSS consists of definitions of how a page component should render itself on the page. For example, you can define that a headline should be blue, 24 point, centered text and that a paragraph should be black, 12 point, justified text. Once that is defined, any normal HTML paragraph tags or headline tags would use these definitions when rendered.

You can define almost all the normal HTML objects this way; background color, background image, background image position, tables, cells, images, divs, etc. This leaves your HTML code clean and much easier to read. Just like those Ronco TV commercials, there's more! If you have a multi-page web site and you use CSS and all your CSS definitions are in a separate file, you have one place to go to change the look and feel of all the pages in your site. Imagine if you have a 50 page site and you learn that the size of your text in all your paragraphs is too small or the wrong color to maximize sales: instead of having to edit 50 pages and change the definition of each paragraph, you simply edit the CSS file and you're done!

But with CSS what do you do if you want one paragraph or a set of paragraphs to look different? You define a class. If you have a right column where you display ads in your CSS, you would define a class and give it a name such as ".rcol", then you would define the necessary items that you want to look different (p tags for example). ".rcol p" would be used to control how a paragraph tag was rendered. You simply add "class=rcol" to the paragraph tag, or the table tag if it's in a table, or div tag if it's in a div, etc.

This is also where the cascading in CSS comes into play: the default definitions cascade down into a class as long as the class does not contain something that overrides the default. This means that in our example text rendered in a paragraph tag looks different for the rcol class, but because that's the only thing we've defined for rcol, everything else would use the same styles as the rest of the page.

You can also define size and positioning for objects in CSS. This is one place where we hit the real world of CSS pretty hard. Not all browsers support the size and position commands the same way. This leads to hacks that define a position and then use a command that is known. For example, to cause Internet Explorer to bail out of the CSS, after that line you use a position command that Netscape for example understands. CSS uses the last definition of an object so this technique can be used to "trick" or "hack" CSS into working across more browsers than it normally would.

I don't recommend doing this. One reason is that it's messy and easy to forget why you did something. The other reason is because as browsers are updated, or new devices come online, they may not follow these unwritten and unsupported hacks and your pages are apt to be all messed up. To get around this I usually use CSS as much as I possibly can and then use tables and in-line definitions to control positioning and size. Some people will go to great lengths to use CSS for everything, even replacing all tables, but here in the real world, you should get the page built, functioning, and in a form that can be used reliably on as many platforms as possible.

Not all web site software packages like Microsoft Front Page, Dreamweaver, or Adobe GoLive, etc. fully support CSS. You'll have to do some coding manually. Don't worry, it's not that hard. I have an online course that can teach you how, just follow the link at the end of this article. Take the time to learn CSS and implement it in your web pages. It will be time well spent.

About The Author
Fred Black is an experienced web developer offering instructional videos at www.WebSiteTrainingOnline.com, An Introduction to Creating Web Sites.

Printer Friendly Version of this Article