| If you are still designing with tables then you are | | | | with @media rules) allow authors and users to design |
| missing out on a lot of the benefits of cascading | | | | style sheets that will cause documents to render |
| style sheets (CSS). Tables were not supposed to be | | | | more appropriately for certain devices such as braille |
| used for designing but unfortunately it has been the | | | | devices, speech synthesizers, or tty (text telephone) |
| standard for a long time. | | | | devices. |
| Not any more. | | | | Learn more about Accessibility Features of CSS |
| 1. Separate content from presentation. An external | | | | 8. Save time. CSS will allow you to design your site |
| style sheet can contain all the styles for your web | | | | much faster than tables because there are some |
| site, then if you want to change the content you | | | | styles you can use for every site. I store "often |
| only have to edit one style sheet. This is great for a | | | | used" CSS snippets in a special file where I can easily |
| web site that contains hundreds or thousands of | | | | access them for any site I design. |
| pages. | | | | 9. Save money. CSS will shorten the project |
| Imagine if you had to edit each page..it would take | | | | development process and eliminate design obstacles |
| you forever. | | | | that occur from using tables. If designing many web |
| 2. Google benefits. Google gives more weight to | | | | sites you will be able to use the same style sheets or |
| content closer to the top of your HTML document. | | | | just make a few modifications to them. You will still |
| Search engines spider the content that comes first in | | | | charge for the design project but it won't take as |
| your source code. With CSS you can easily structure | | | | long as when using tables thus making you more |
| the content to appear first with the rest of the | | | | money in a shorter time period. |
| source code following it. This will help outrank your | | | | 10. Flexibility of design. You can use pixel precision in |
| competitors who may have their navigation appear | | | | your web site designs. By adjusting the margins and |
| first and their content last.. | | | | padding of the CSS you can easily adjust the position |
| 3. Fast loading pages. Tables slow down the loading | | | | of your content. You can also create very modern |
| of your pages because the spider has to crawl | | | | designs that can't be duplicated with tables. For |
| through each table. If your tables are nested inside | | | | example you can use a background image for a |
| each other your page will load even more slowly. | | | | header then place your content over it using the H1 |
| Designing CSS-based web pages will speed up the | | | | tag for better page optimization. |
| loading of your pages considerably because the | | | | 11. Way of the future. The future of the web is |
| styles are all contained in one style sheet. | | | | moving towards better accessibility with web sites so |
| 4. Small file size. CSS will reduce the file size of your | | | | they can be viewed by as many people as possible. |
| html document. If you look at a web page that is | | | | This may be enforced in future web standards |
| designed with CSS you will notice that the size is | | | | therefore if your web site is still using tables or |
| very small compared to one designed with lots of | | | | deprecated tags it may become obsolete or |
| tables. This also helps reduce load times. | | | | disappear from the search engines. This could really |
| 5. Reduce clutter. CSS allows you to get rid of a lot | | | | hurt your business. |
| of extraneous html code therefore making your site | | | | 12. Print friendly. When a user chooses to print a web |
| code neater and cleaner. This makes it easy to alter | | | | page an alternative CSS document can be called up. |
| the code if you need to make edits. | | | | This document can specify that formatting, images |
| 6. Eliminate javascript. Many people surf the web with | | | | and navigation disappear and just the page content |
| javascript turned off because they don't want to be | | | | appear on the printed version. |
| vulnerable to viruses or allow pop-ups. This means | | | | See creating print style sheets |
| that the beautiful javascript navigation you produced | | | | Conclusion |
| will not be seen. You can often achieve the same | | | | If your site is still mostly using tables for its design, |
| affect with CSS navigation. These allow for rollovers | | | | you may want to consider doing a redesign. It may |
| and other pretty affects and are much more user | | | | take a lot of work now but if you leave it for too |
| friendly. | | | | long it will be MUCH MORE work plus will be missing |
| 7. Accessibility. If you use CSS2's aural properties it | | | | out on all the benefits of CSS outlined in the points |
| provides information to non-sighted users and | | | | mentioned above. |
| voice-browser users. The CSS2 "media types" (used | | | | |