Probably one of the hardest concepts to get my head around when I first started blogging was CSS. I can remember when CSS was first proposed and all the websites devoted to website design were talking about how it was going to revolutionize the way we construct our pages and how much better everything would be all the while forgetting that Microsoft has a bad track record at actually implementing standards in their browser so while it fixed one set of headaches it introduced a whole new buttload of other ones. I took one look at an example Cascading Style Sheet and it looked a little like this…

#footer {
margin: 0;
padding: 5px 10px;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
background: #fff;
color: #333;
font-size: 70%;
font-variant: small-caps;
letter-spacing: 0.09em;
}

.date {
font-size: 100%;
background: transparent;
color: #000;
}

.title {
font-size: 130%;
font-weight: normal;
background: transparent;
color: #336600;
border-bottom: 1px solid #ddd;
}

And I thought to myself “you have got to be kidding me” and then I went back to designing pages the old outmoded way using lots of nested tables that would make most ordinary people go insane just from glancing at the code. I managed to avoid learning much of anything about CSS other than it was the hot-shit for years until I decided to start blogging and I installed MovableType. MT’s default templates used CSS and everything I read from other people who were using MT was always talking about CSS and it became clear to me that it was time I stopped being such a sissy and learned what the hell it was and how I should use it.

Turns out it’s pretty addictive once you get it under your skin. I find it very hard to design websites without it anymore and while I won’t profess to be an expert at HTML or CSS by any stretch of the imagination, I must say that it is the better way to do things even with all the headaches it brings. One aspect of it that took the longest to grasp was the Box Model and that’s still an area that can trip me up from time to time simply because there are so many parts to it that aren’t always clear in how they fit together. That’s where the hicksdesign 3D CSS Box Model comes in handy. I wish these guys had done this up back when I was learning as it shows you exactly how the various parts of the box model fit together to make an element on your page. With a single image it all becomes clear.

OK, the truth is this is an ideal-world how it SHOULD work representation and you’ll quickly learn that different versions of different browsers will find different ways to chew up your attempts at CSS in different ways, but at least you’ll understand how it’s SUPPOSED to work. And it generally will for folks using the latest browsers. Still, understanding the problem is the first step to overcoming it so if you’ve been struggling with CSS yourself this is a good starting point.