Reasons to Use CSS in Website Design

07/16/09 | by Mark

| Categories: Website Design

Today’s topic is Cascading Style Sheets. This is a critical tool for building websites today. In this entry I will NOT teach you CSS! There are hundreds of books on the subject and thousands of tutorials online. I’m not going to reinvent the wheel. I just want to give you some background for it and tell you why you should use it.

In researching for this blog entry, I was going over old web designs from when I first started out in 1999. I actually started teaching myself HTML code in 1997. I would build a layout in an old design tool called Hot Dog and then view the source code to see how it did it. Then I would change some things and see how the code behind the scenes changed. But anyway, looking back at some of these old designs really brings back memories. In case you haven’t seen this, you can go to www.archive.org and view many old websites. They store the code for the websites periodically, but never the images, so if you find a page that has a lot of broken images – they have just been removed from the server to save space. You can view one of our old homepages at http://web.archive.org/web/20010202082500/http://wrightsites.com/. That is from October 2000. There are some broken images here as well because as designs have changed, I have occasionally wiped out the data in the account before publishing a new site. But you get the idea.

This site was built old school. I coded the HTML by hand into Notepad. It’s a pretty simple design that uses tables for the layout and basic HTML code to set fonts. For 2000, this method of design worked well. However, as time went on and designers developed new ideas and skills, the old method of using tables for layout became cumbersome. Tables, after all, were never designed to build a site layout – they were designed to orient data into tabular form. And using tables to create a page layout was incredibly inefficient. A new method was needed and the World Wide Web Consortium (www.w3.org ) published standards for Cascading Style Sheets (CSS). CSS version 1 was actually published in 1996, but support in web browsers was so spotty that few designers actually used it. Today, we’re on CSS version 3 and we finally have what most consider being full support for version 2 standards.

But wait… what are Cascading Style Sheets and what do they do? CSS is used to separate a page’s content from its presentation. Using CSS, we can specify font size, exact locations of images or other content on your site, various border settings, and much, much more. So, using CSS can make your website load faster, use less bandwidth, and be more accessible to people with disabilities – all at the same time!

Let’s first look at the name: Cascading Style Sheets. The key word here is “style.” CSS lets us choose the style of the page and all of the elements on the page. “Sheets” is in the title because this was the intended method of use – you would attach a style sheet to each page, thus allowing you to maintain the overall style of the site from one file. “Cascading” is important because in complex designs, certain elements on a page may be similar, but not exactly the same as another element and we can use multiple sheets or inline styles to get the effect we want. This brings us to how to insert or connect styles to your pages. There are three ways to do this. First, you can use inline styles. With this method, each element on the page will have a style modifier in place that will direct browsers how to display. The second way is by putting all of the styles in the <head> section of the HTML code. This allows you to reuse styles among multiple elements on the same page. Finally, you can attach a separate file to the page that will direct the browser to check with a .css file to find out how to display everything. This method allows you to reuse styles among different elements on multiple pages across an entire website. With this method, you can change one line of code and all of the text on your site will switch to red. Now I know that sounds intriguing and useful, but are you really going to want to do that? Most sites are carefully designed with coordinated colors, so it may or may not work for you.

So what problems are associated with CSS? Well, there are still many people who are using outdated web browsers. Firefox isn’t such a problem because when an update is available it will prompt you to upgrade when you load it and will annoy you until you do. Internet Explorer is more of a problem because updates are pushed through Windows Update which many people turn off or ignore. Older versions of these and other browsers had many problems interpreting CSS code the way it was intended. This caused pages to look fine in one browser, but terrible in another. Thankfully, the two biggest browsers, IE and Firefox, are now nearly fully standards compliant. That means it works the way we expect it to. But we still have to deal with the people who haven’t upgraded yet. So how far back do you support? That’s a question you’ll have to answer for yourself, but I usually support back to IE6 and the most current Firefox. This is pretty easy with CSS because you program the pages to look at what browser the user has and then grab the appropriate .css file. Failing to do this will result in pages where things are out of alignment.

If you’re looking for more information about Cascading Style Sheets, I would recommend Cascading Style Sheets: Designing for the Web, Cascading Style Sheets: Separating Content from Presentation, CSS: The Definitive Guide, or HTML Utopia: Designing Without Tables Using CSS. These are all available from Amazon.com.

As I mentioned above, using CSS has many advantages. First, websites built in CSS are more accessible than those built using tables. For visually impaired users that need a text-to-speech device, tables cause many problems. These devices don’t look at the layout of a page, they look at the raw HTML code and start at the top and work their way down. For tables, they will start at the top left and work their way right and then down. That’s fine for tabular data that should be in a table, but layouts usually require many nested tables, which cause havoc for speech devices. CSS allows you to build a site that is friendly to these devices and to those who need them. The second advantage to CSS is that using tables for layout causes page load times to go through the roof. When the browser encounters a table, it has to read the code for the entire table before drawing even the first cell. So when you use tables for layout control and your entire site is a table, the browser has to read the whole site and then figure out what to do with it before it even begins to appear on the screen. CSS sites will not encounter this issue. The third advantage to using CSS is that it saves bandwidth by eliminating the need for placeholder graphics. In table designs, you would often need to create a transparent GIF file that would be sized properly to keep a cell where you want it. While not large, these files still take up bandwidth. No need for this with CSS since you can specify to the pixel where things will show up on the screen. Finally, CSS sites are just easier to maintain! Maintaining a site with nested tables is tough. I can remember times when I needed to change one image and it broke the entire layout! No idea why – it shouldn’t have – but it just wouldn’t work. With CSS, swapping images or text out is simple and clean.

So if you’re building a website today, I highly recommend that you use CSS to save yourself a headache during construction and later during routine maintenance.

Before I go today, I’d like to welcome another customer to the Wrightsites.com family. The Ohio Regional Clydesdale and Shire Association has brought their website (http://www.orcsa.com/) to Wrightsites.com for hosting. The site was designed by a member of the organization and we are providing the hosting and domain registration.

Thanks for reading and I wish you all a great day!

Send feedback » •