About This Site

A web creative passionate about standards and strategies.

Resources

Desktops

China Burn

China Burn
Download: 1024x768 | 1280x1024

Eastern Bloom

Eastern Bloom
Download: 1024x768 | 1280x960

Cascading Style Sheets (CSS)

What's the big deal?

It is a very big deal. In fact, its the standard to develop website in the professional environment. The reasons are amazingly simple. Web pages are not all about tables. Neither is it about divs or any element tag what-so-ever. Its purely about the content. Designers and developers comes in and presents it better, faster and as accessible as possible. As a part of the overall solution, CSS does this rather well. Here are some reasons on why it is the new standard.

Firstly it is because table layouts are really a bad method to laying out all web contents. Tables should be use for tabulated data or similar content. Reason why it was used was because CSS1 didn't work properly on most browsers till a few of years ago (we are now using CSS2, CSS3 is coming in a few years) and tables had been used as the only way to structure content. It is not made for containing graphics, vast body text, navigations, plugins or all elements. Divs, spans and others are used as containers because it is made to contain elements. This would be more effective as you may specify and control ID, Class and tags contained within using CSS.

It is more flexible as it works with all current browsers, simpler to work with as you can learn and understand most CSS codes easily, and you only need to keep one version of any particular design in one file. Change it in one file, it changes all related files.

Another advantage is it reduces file size of HTML & XHTML (table layouts) between 40% to 70%. These bytes adds up substantially as you have over hundreds of pages and being downloaded by many users. It will cost you or your clients.

Some tips

Semantic coding or logical coding means you should try and use existing elements present in HTML/XHTML. Don't use or make a class to create a heading when you can control <h1> header tags. Same goes with images for "img", links with "a" tags. Use what is already there.

Please note "cascading" means its can be as descriptive as it needs to be. For example,

body #idname .classname .otherclassname ul li a {--attributes--}

It can be as detail or deep as you like it to be. Check out the resource list for more details.

Please view Doug Bowman's presentation one and presentation two for further proof why CSS is important, but also read why CSS is not the magic bullet. It is only a tool.

Resource Links

HTML

CSS

Accessibility

Other Browsers

Stock Photo Galleries

Typography

.
.
.