Style Power

Posted March 25th, 2005 by Mike Cherim

A short time ago web developers used to use tables to place contents on a web page. The attributes of these tables and associated elements was controlled on-page. This was so difficult for developers. If a change needed to be made it involved a lot of work as many corrections needed to be made. Then came along CSSs or Cascading Style Sheets, putting some definitions of the table content elements on a separate page. A single page. This allowed content updates to be made by solitary changes. Then tables went bye-bye and developers started using page divisions or Divs. And better yet, as progress was being made, the position and other attributes of the divisions started appearing on the CSSs as well. The advantage was not only simplicity, but it allowed one to position things on a page with an pixel-perfect accuracy and ease never before experienced. The results: Jaw-dropping power and control, the likes of which had never been seen before.

Some developers, no, many developers, still struggle with tables and use font tags and the like to define the page contents. This is not only difficult, but it’s now an out-dated method. The Beast Blog and my Green-Beast.com main site are up to speed. Just about everything is controlled by CSS. It’s easier and more reliable. Moreover, it gets all of the style information off the page and out of the mark-up. It no longer belongs there.

I’ve yet to learn everything about Cascading Style Sheets, and due to the differences in the way some "supporting" browsers interpret things, a number of work-arounds needed to be made on the complex Green-Beast.com website. Not hack methods, mind you, just concessions. I succeeded, though, creating some unique methods to get the job done. My Green-Beast.com style sheets — one for each style offered — are on the long side, but I had to in order to control such a complex layout and yet allow for browser differences. I have come up with some techniques that will do the trick in just about any application. So far so good, I’ve yet to find a CSS-supporting browser that doesn’t show the Green-Beast.com web pages exactly as I intended. I’ve tested that site on everything that I can. For more information about the testing I’ve done, please check out the Access Page » Site Testing information I provided.

When I first started using cascading style sheets for positioning — and you can do this too as it’s a good practice exercise — I made some boxes (divisions) and gave them background colors so I could see them. I then started moving them around the page, stacking them, testing the limits, seeing just what they could do for me. I was blown away. I was, and still am, simply amazed at the level of control. I’ve done the table thing and it can be a struggle. I mean tables are made for displaying rows and columns of data, nothing more. I’m a complete convert. Unless I plan to display tabular data, I’ll never use another table again. There’s simply no need whatsoever

I could go on and on about the merits and how-to of style sheets, but I’m not going to. Not at this moment, anyway. Instead I’ll offer you some resource links, some really good ones I think. So if you would you like more information about style sheets? Check out the links below. Some of these have helped me a great deal and will likely help you too. These links, of course, will open a new browser window.

In summary. If, as a fellow web developer, you’re using tables, you need to stop and adopt cascading style sheets for your sites’ positioning and styles. If you don’t, you’re falling behind the times and will encounter future issues with your sites. Moreover, you really are doing things the hard way. Using CSS in combination with solid, valid mark-up, and your site can rock. Want to take it to the next level? Learn some server-side scripting and you’ll be there in a way you never thought possible.

Filed under Do It CSS Style —

One Response to: “Style Power”

Ethan Taylor responds:
Posted: November 1st, 2005 at 10:28 am →

I really appreciate what you’re doing here. Very interesting site.

Sorry. Comments are closed.