If you’ve messed around with creating a web page, odds are you’ve used tables. Tables are a great way for someone who is new to web design to start laying out their HTML. I know that’s where I started. While they can get the job done, tables were not designed to be the backbone of web page layout. The table element is meant to be used for displaying tabular data (hence the name). Time to learn some CSS!
What is CSS?
CSS stands for “cascading style sheet.” Think of it like this . . . there are two main properties to your web page. On one hand you have the HTML. Your HTML is responsible for the content of your website and has NOTHING to do with the visual representation. On the other hand you have your CSS file which tells your web browser how to display the content. Check out csszengarden for an excellent visual representation of this idea. Here you can see the work of advanced web designers applying unique CSS files to one common HTML document. Notice how each example contains the exact same content, but is displayed in a vastly different manner through the use of CSS.
Separating content and design is extremely important. One of the most frustrating things on the web is waiting for a web site to load. If I’m browsing the web and find myself stuck loading a page, chances are I close the window and find someplace else to go. So if you want to drive traffic to your site, you want to make it load as quickly as possible. This is where using CSS really shines! Browsers are much quicker at applying CSS properties to an HTML document then reading through HUGE table layouts. CSS files are also cached (stored) on the user’s computer which means it only has to be downloaded once. So if your web site has more than one page that references the same CSS file, load time is almost instantaneous.
Using CSS also addresses the issue of getting listed in search engines. The cleaner and more organized your web page is, the easier it is for search-engines to read and rank your site. If you have completely identical sites, in terms of content, where one is designed using a bulky table-based layout and the other using CSS, search-engines can make a more educated guess as to what the CSS based web page is about, and thus will receive a higher ranking and more search traffic.
Switching over to CSS layouts is a very important step in website optimization. While it can be pretty intimidating at first, it is a giant leap in the right direction. I highly recommend checking out the web tutorials found at Lynda.com to get started. If you’re more advanced with CSS, alistapart.com is a great site to learn more about professional techniques and web standards.