Learning CSS

Posted on by

Back in my Windows programming days I used to focus a lot on user interface design. I think I was actually pretty good at it. As time went on I moved into more of the back-end type of programming (utilities and things of that nature). When I moved to Unix programming I did not even touch the graphical UI’s. There was nothing really of interest to me.

When I started web programming, HTML just seemed tedious. I learned enough to get by, but the constant use of tables and getting things to align properly proved to be just too boring for me to ever try to get proficient in web UI design.

Over the last week or so, I’ve decided that I really have to learn about Cascading Style Sheets, which as I’ve mentioned previously, I didn’t focus on very much due to the incompatibilities between browsers in the early days. My initial interest in the technology started about 3 months ago from the work that I have been doing with WordPress, however the final straw that made me think I definitely had to learn this stuff was an article called Throwing Tables Out The Window at stopdesign.com. The author talks about a presentation he gave on CSS in which he, during the presentation converted the Microsoft web site from a table based design to one using CSS. He did the conversion real time to show the audience how quickly it could be done.

The final result of this conversion was a page that looked exactly the same, but reduced the page download size by 62%.

When I saw these results, I decided it was time to learn a little about CSS, so I bought the book Web Designer’s Reference : An Integrated Approach to Web Design with XHTML and CSS by Craig Grannell and poured through it. I also grabbed the O’Reilly CSS Pocket Reference so that I would have a quick way to look things up. (OK, honestly — I bought the Pocket Reference first, and got completely lost — get a real book before you pick up a quick reference).

When I learn something, I need to apply it to something that has value to me. If I just walk through sample projects, I tend to get bored because I’m not getting value that I can use right away.

The project I picked was the home page for my company, which currently uses pretty heavy table layouts. I want to see what kind of space savings we can achieve along with the kinds of maintainability savings that can be realized using CSS based design in lieu of tables.

I started this project on Monday, and to be quite honest, was fairly intimidated, as I always am when stepping outside of my comfort zone. After all, I deliberately did not learn more than I needed to know about HTML and layout because I found it boring.

Between Monday and today, I have been working on the project in most of my spare time (getting up early and working on it when I get home). As I work more on the problems, I understand more of the technology. Given the limited amount of time I’ve had to work on it, I’ve made some pretty decent progress and my excitement builds more and more the more I get done.

I seriously don’t think I’ve been this excited about learning new technology in a long time (probably since I started learning Python a year or so ago), and though its geeky, I find myself thinking about this stuff constantly. The ability to completely detach the presentation from the content is just completely cool.

Now there have been some issues and a lot of frustration. I got things looking great in FireFox and then made the mistake of loading it in Internet Explorer only to find that everything was screwed up. However, a few hours spent this morning and I have the display working fine in both browsers, due to the wealth of information out on the Internet.

If you find yourself laying out your pages using archaic, 90’s style table layouts, you need to start looking at CSS. The possibilities are far beyond the simple font settings that so many sites limit themselves to.

At some point in the future, when I finish my first “project”, I hope to post it up as an example. There is a great site called “Tableless” which showcases corporate web designs reworked using tableless design. These examples do a really good job of illustrating the ability to do complex layouts in CSS that one with a limited idea of the technologies might not think is possible.

Following are some resources on the Internet that I have used to help me learn this stuff. Hopefully, they will be helpful.

Related Links: