Why learn and use CSS?

First let's start with the WHY you should switch to CSS:

Page size

A tableless page's HTML code is a few times smaller than a nested table page's code. Also by using a few CSS files throught out the site, they will be cached by the browsers, so will only be loaded the first time the user will enter your site, and for the pages he will browse, the data downloaded will be much smaller.

SEO

For search engine optimization an important factor is the page sizes, smaller is best. Actually smaller content length over code length ratio, and with CSS sites this ratio is more in favour of the content length, which is a thumbs up.

Flexibility

You have more control of the flow of the layout, than with tables. Tables as rigid. Also you have a lot of control over the properties of every element, much more than regullar HTML attributes can offer.

Accessibility

By definition in specifications tables should be used for tabular data, such as reports data. Tables should not be used for design purposes.

Extensibility

With CSS layouts, you can create specific CSS stylesheet and using the same HTML code you will reach out other devices than the browsers, such as PDAs, mobile phones.

10 sites of CSS

If you're reading this paragraph, than something must have convinced you (hope it was me). Next I'll list, in an order of importance I give them, some sites which everyone who is creating CSS layouts should know and bookmark:

1. CSS Discuss wiki

   IMO, this is the greatest single site of CSS information, which includes descriptions and examples of basic & advanced methods used in tableless design.

2. CSS Tutorials for lists, floats, selectors

   This is very good for beginers as it shows you how you can style various elements.

3. Layout Gala

   A collection of 40 CSS layouts. Whatever you need for a site, you'll find the skeleton here.

4. One True Layout

   An almost perfect atempt to get the perfect layout. Notable sections which can be used independantly: Any Order Columns, Equal Height Columns (read the appendices on this subject).

5. Link styles

   How you should write styles for links.

6. CSS Rollovers No Preload

   How to create a rollover button with no preload. Very easy with CSS.

7. Styling Form Fields

   Great piece on styling forms with CSS. Provides 5 different types of layouts for forms.

8. Definition lists

   When and how to use definition lists

9. CSS Tests

   If you don't know how to create a certian effect, you should check this long list of CSS tests. I bet you'll find it here.

10. CSS filters (hacks)

    And of course in every domain there are bugs, in our case browser bugs which don't agree on certain implementations. This is where filters (hacks) come in handy.

These sites are the ones that I consider best teaching someone the art of CSS. You should be warned that creating a tableless layout at the beginning may seem difficult because of some browsers (IE mostly), but in time you'll learn to avoid certain techniques which don't behave nicely.

So do you have another resource which could be usefull for someone who wants to learn CSS? Write them in the comments!

Comments

Post your comment