CSS provides incredible control over the look and feel of a website, but it also creates faster downloads, improved accessibility, a higher level of cross-browser/platform compatibility, and dynamic design that can change according to the user's preference. CSS is the way forward with web design and most new websites use this design method by default already.
I have been using CSS from the early days of CSS design, however it was only within the last 4 years that I fully understood the real design potential of this tool and how to implement it. Prior to that I had used it, as many designers did, simply as a way to manage the text and background colour of a site. It was an easy way for me to implement a look across a large swathe of content without having to fiddle with individual Mark-up tags. I knew much more could be accomplished with CSS, but to be honest I didn't understand the language beyond anything but a basic level, and wasn't interested enough to learn how to accomplish something I could already do with tables and HTML tags.
Early in 2004 I ran across a site called The Zen of CSS Design created by David Shea. Now famous, this site was specifically put together in the hopes of demonstrating the immense power of CSS specifically as a design tool. The concept was simple, use one HTML/XHTML page as structure and allow designers to submit their own open source CSS files to "redesign" the site. A quick look through the gallery had me immediately convinced I had wasted my time putting off learning how to use CSS design and began dabbling straight away.
It took a good while longer for me to become more or less familiar with the language, and even longer still to design a site completely with CSS, but now I consider CSS (and in particular cross browser fixing) to be one of my strongest technical skills, and I evangelise its use in every aspect of my web development.
Touchspace
I am currently putting some time into developing the interface for a new kind of website called a touchspace which is fully configurable and editable in the browser. I have spent nearly a year working with a development team to produce a fully compliant, crossbrowser, usable solution that offers a host of features and interface configurations.
Styling is a major part of this, but my primary influence on the development of the project is at a higher conceptual level as artistic director, creating wireframes, mocking designs, and quality control.
Engino Back-end console
While at Engino, I worked on several sites as a CSS coder and cross-browser developer. Most of that work was on sites designed and laid out by someone else, but I was also responsible for the development of the Back-end console for the CMS and this role allowed me full control over the design, styling and interface development of the project.
ACPD
This is a site I designed for a former employer that makes use of a a lot of CSS design and some handy JavaScript to provide a text resizer as a usability feature.
I tried to push the boundaries technically with what I was capable at the time in making the site fully cross broswer compatible, accessible and usable. The design itself isn't as finished as I would have liked it to be, but I left the company before I could finish work on the site anyhow so here's what's done.
Truthinertia (old frontpage)
This is a little bit of css trickery I dreamed up ages ago just to provide a nice entrance to my site. As most designers seem to do though, I never actually finished it, but the css is still worth a look..
Not generally too complex, but the thing to point out is that it works in all browsers (as of 2006!) and that there are some interesting hacks to be looked at.
Truthinertia
As with the HTML pages I thought I would begin the exploration of my CSS design skills with the best and most recent example: this site. I have structured virtually every aspect of this evidentiar materials site to be controlled by a single CSS document, and as a result it is by far the most comprehensive CSS design I have done to date.
The CSS in this site is written with the intention of performing three functions:
To precisely control the layout of all design and text elements so as to provide a highly aesthetic experience across platforms.
To allow for all design elements, excluding thumbnail links which are considered content, to be dynamically updatable through CSS alone.
To comply as much as possible with Accessibility standards such as text readers, text size control, and image handling.
I have done my best to meet all three of these functions in order to demonstrate my experience with them, and I'm pretty happy with the result. You can view the site with CSS turned off by clicking here.
Garden Art
Garden Art represents a basic attempt at employing more complete CSS control over not just text but design elements as well. The layout of this site was particularly challenging to design, and the use of CSS was both necessary and incredibly helpful as an alternative to totally inline HTML controlled design.
It is however a dinosaur of sorts, as there are few areas that could not be improved with better CSS, but as I was working to a brief and my understanding of CSS wasn't complete (or at least as near to complete as it is today), I was reluctant to venture into uncharted territory while "on the clock", so to speak.
real IT
Notice that although the site is heavily designed graphically, there is no CSS control over anything other than the text and the main background. Images are placed within a nested tables ad are sliced with the background elements included.
There is proper use of Classes and IDs though, and the CSS document itself is broken down into semi-structured elements that improve design flow with a little less than a moderate level os redundancy.
Country Life Designs
And now we have a great example of a CSS design by "My Name Ogg!". Taken straight from the Stone Age of my design career, this site is admirable for even using CSS at all. There is no use of image placement, there is no use of correct element creation. This CSS file does little else than describe text styles throughout the document.
In my defence however, at the time there was also very little browser support for anything much more advanced. I could have included some design control, at the very least some redundancy elimination, but as there was little need to learn how it seemed to work fine as it was.