Something I’ve been meaning to post here for a while is The CSS Zen Garden. I’ve been taking some timeout to visit this site every couple of days to see what new designs are up. It’s a great example of how CSS can be used to produce very different layouts from the same basic XHTML markup. An excellent showcase for the power of CSS, and an effort I fully support. Maybe I’ll have a go at a design, though my graphic design skill isn’t that great I may be able to come up with a nice colour scheme or such that will come up to the high standards needed. I think my CSS skills are there, just need to polish up my design skills.
Looking back on the time I’ve been working with CSS, I realise the skills I now take for granted (laying out columns, styling headers, sparing use of borders etc.) is difficult to grasp for those used to the tables way of doing things. It took me a long time to figure it, and still things pop up that surprise me.
For a coursework recently, we were given the task of designing a site about a famous scientist. The great thing about the project was we were free to design for whatever browser, resolution etc that we wanted. The design I came up with is sitting here at the moment. It’s designed for recent flavours of Mozilla with as high screen res as you can use. I took full advantage of the freedom offered to let my imagination lead. The site is meant for young people, so I decided on a more weird design, putting the site onto a single page and using CSS to put the various sections in scrolling div tags around the page. I use png files with transparency to create a path through the document. The transparency is used so that the images can overlap the background as the user expands or contracts the browser window. Shame on IE/Win for not supporting this (go sign this petition on this topic). Anyway, I think that the page came out pretty much how I hoped. Maybe slighly too busy in places, but an example of the sort of stuff you can do with CSS that would be nigh on impossible with tables. It’s worth taking the time out to learn at least the basics, such as font styling, even if you’re not going to learn the more advanced stuff.