Loading... Please Wait...
Loading... Please Wait...

Search Support

Search our knowledgebase? Enter keywords or article id:

> go to search support


Support Index


Help and Support

PixelMill Live Help

Search

Enter keyword or id#:




Browse


Promotions


Quick Links

Printable Article

Why CSS?

Article ID: KB101838

The recent release of Expression Web is only one more example of how web standards and CSS have truly come of age.

CSS has been around since 1999 (!), but with spotty, inconsistent browser support (plus the inconvenience of having to figure out a new language) the bulk of web developers, including myself, ignored it or used it for minimal font formatting and removing link underlines.

But that was then. This is now... Everywhere you look, people are encouraging the use of CSS for formatting web sites. The current popular browsers all support CSS (in fact, it is is completely possible -- and not difficult -- to take any tables-based web layout and create a CSS-formatted site that displays consistently in all the browser). The popularity of handheld internet devices (cell phones, PDAs, etc.) has companies taking a second look at the accessibility of their web sites. Even Microsoft has jumped on the web standards bandwagon with Expression Web, with specific tools and tasks built around developing sites with XHTML and CSS. (At PixelMill, we've been offering CSS-based web templates since early 2005.)

But is CSS really for you? Why should you bother to climb up the learning curve of CSS-based web development when you are already comfortable using tables? "Everyone else is doing it" may not be the most compelling reason, so let me first share a little bit of my story and then give you a few specific reasons for making the switch.

Confessions of a former tables-user

Up until two years ago, I developed pretty sophisticated tables-based web sites, applying CSS to table cells only for background colors and basic font formatting. I would come across various articles about CSS positioning and layout, my eyes would cross, and I would quickly click away from the site. I firmly believed that tables were the way to go if you wanted full browser compatibility.

I'm not sure exactly when things changed, or what caused me to switch sides. Perhaps it was the week when I sequestered myself to "finally learn about this CSS thing." Perhaps it was that there were finally lots of free, online resources for learning more about CSS. Perhaps it was CSS Zen Garden and being amazed that one HTML page could be formatted using CSS in so many different ways.

It's been almost exactly two years since I started developing exclusively with CSS/HTML, and now I'm probably annoyingly enthusiastic about CSS. I exclusively develop CSS templates and have been helping to slowly transition the mammoth PixelMill site over to valid XHTML/CSS.

Some good reasons for learning CSS

There are many people who have provided eloquent reasons for learning CSS, and I've linked to additional articles below. Here are the ones that stand out to me:

CSS sites are easier to develop and maintain. Once you get past that initial learning curve, CSS sites are actually easier to develop and maintain than tables-based sites. I'm not just talking about putting together a three-column layout -- I'm including the time it takes to fine-tune the "little details" of a site and modify the site down the road. Our pre-CSS PixelMill site was a huge pain to manage -- a design decision to change the font size on the page involved lots of fancy search-and-replace commands and having to double-check every page. CSS allowed us to separate the design and formatting into a separate stylesheet. Now, it's easy to make a design change -- we can just open the stylesheet, make modifications to the code, and the entire site is affected. The designers are happy because we can make changes and fine-tune as we see fit; the coders are happy because we aren't messing up the page code or forcing them to recompile the site's .NET controls.

Using a stylesheet reduces page size and bandwidth. My old tables-based sites had all sorts of nested tables, graphics used for spacing table cells, and lots of additional code for formatting. Using a stylesheet instead can dramatically cut down the amount of code actually used on each HTML page. Furthermore, with tables-based sites, all the formatting/layout stuff on each page has to be downloaded for each page. With CSS, the stylesheet is a separate file that only gets downloaded once by the viewer but then applies to each HTML page, so you're also saving on bandwidth. We're really only talking about a few dozen kilobytes that you're saving per page, but if you have a high-traffic site, a lot of pages, or your hosting account has you pay for a limited amount of bandwidth, you'll also be saving dollars -- and who doesn't want to do that?

CSS provides future security. When your site conforms to web standards (i.e., is compliant with XHTML, CSS, and accessibility standards), you can rest assured knowing that it will work reasonably well for future browsers and devices. Naturally there may be small CSS bugs to work out, but (going back to my first reason) the fact that you have an external stylesheet makes it very easy to fix your entire site. For example, some of our two- and three-column CSS templates lost the column backgrounds when IE7 came around and we had some frantic customers calling us, but we were able to tell them to add one simple line of code in the stylesheet to fix it.

CSS increases potential to broaden markets. Using a stylesheet to format your site means that you have future opportunity to develop alternative stylesheets for other web devices. For example, the "mobile web" seems to be the Next Big Thing on the horizon for web developers. In the old days, new technology meant that you had to develop ANOTHER separate copy of your site with a different tables-based layout that worked for that alternative device. Now, you can simply create a separate, different stylesheet that is specific to that kind of device and only maintain one "version" of your web site. One web site, multiple stylesheets -- when you separate the XHTML content from your CSS layout, you finally have the opportunity to target those mobile web users without the headache of maintaining two separate sites.

Join a broader community. Part of why CSS used to be so frustrating was because browsers didn't interpret CSS consistently. But, in fact, there were cross-browser issues even with tables-based development as well -- those of us who have developed complex sites with tables know full-well the various table hacks we had to use to get a site to work in Netscape and Internet Explorer. (Although if you've been doing it for a while, those "hacks" might seem like second nature now!) Browser compatibility has always been and probably will always be an issue, yet we see more cooperation between browser companies and the web standards community than ever before. The simple fact that there is an established body of people who all agree on certain specifications for XHTML and CSS (the World Wide Web Consortium, or the W3C) means that we, who are using those specifications, should try to follow those guidelines as they were meant to be used. The hard fact is that tables were never intended for layout; in the current environment, they don't need to be used for layout anymore. Call me idealistic, but if all web developers subscribed to these standards, the browser/device/software world would follow suit. (Oh wait -- we're already seeing that with Microsoft's Expression Web and Internet Explorer 7!)

So perhaps "everyone else is doing it" is a pretty compelling reason after all.

But don't just hear it from me -- here are a few select articles that you may find helpful to read as well:


Was this helpful?

Please rate this article:

Not helpful Very helpful
1 2 3 4 5 6 7

Email address: (not required)

(Please provide your email address if you would like PixelMill support to follow-up with you about your comment. Your email address is NOT REQUIRED to submit a comment.)

Comments: (How can we improve this article?)


Clicking "Submit" will not clear this page.


link to this page: http://shop.pixelmill.com/support/al1121/kb101838.htm
permalink to this article: http://shop.pixelmill.com/support/kb101838.htm

Back to top



PixelMill EDU

Introducing...

PixelMill EDUâ„¢ is an innovative and proprietary online training series designed to aid the do-it-yourself Web builder in transitioning to new Web editors, coding standards, and Web technologies.

Webinars and Seminars:

FrontPage to SharePoint Designer Series
This is a 6-Week series designed to give you strong exposure to the new SharePoint Designer web editor and interface, along with examples of working with Windows SharePoint Services and tips for transitioning from FrontPage.
Register Now!

Tables to Tableless CSS Series
This is a 6-Week series designed to help you transition from building Tables-based Web site layouts to working with CSS to edit and build Tableless Web site layouts. For all Web builders using Dreamweaver, Expression Web, or any other web editor.
Register Now!

FrontPage to Expression Web Series
This is a 6-Week series designed to give you strong exposure to the new Expression Web software and interface, along with tips for transitioning from FrontPage.
Register Now!

Learn more and register!

ADVERTISEMENT
adventisement

Social


Contact Us

Phone: (866) PIXELMILL
(866) 749-3564
Int'l phone: 1 (530) 297-3662

105 E St, Suite 310
Davis, CA 95616 USA

Payment Methods

Visa Mastercard American Express Discover PayPal Personal check Purchase Order