DIY CSS

Maybe you don’t need me to tell you what stylesheets are. Maybe you already know. Maybe you wrote a book on the subject even. Maybe you’re heading back to your mousehole tonight and pouring yourself a tall glass of milk before you get to work writing nice, clean CSS for all the boys and girls in Internet-land.

Or maybe you’re like me, and you started out not knowing CSS from a hole in the ground. Cascading style sheets. CSS. That’s the gig. The web don’t look the same without ‘em.

I’m not real big on classes or tutorials when it comes to web languages and protocols, but if you are, I’d bet all the gold in the California hills that you’re a Google search away from finding some. If you ask me, the game changes way too fast for tutorials to keep up with, so I prefer to go it alone.

So when I set out to learn how style sheets worked, I went hunting for places that had some really primo CSS that I could break apart and put back together on my own. It’s like a mechanic taking apart your engine to see how the pistons and the cylinders work, only it won’t cost you thousands of clams to get the thing reassembled.

Enter CSS Zen Garden.

Here’s how the site works: you start with a page that’s real basic — nothing special at all, just some text divided into sections. Then, you let your imagination run wild, and you come up with some way to lay out the page, which you then bring to life using CSS. Make it as pretty as you want. Give it a vintage flair. Take it to the movies.

The point is to prove how capable and versatile CSS is, and CSS Zen Garden has that proof in spades.

I came across the site a bunch of years back and helped myself to the code so I could take a peek behind the curtain. Strictly speaking, I’m not sure that’s what CSS Zen Garden intended, but as long as you’re using it to learn — (not just swiping someone else’s code and passing yourself off as a smart guy), there’s really no harm done. Do some experimenting, figure out what happens if you change the margin-top from 20px to 40px here or the padding-bottom from 32px to 64px there. Then, take your knowledge, and get out there and write your own.

Once you have the lay of the land, here’s another handy spot for you to visit: CSS Reference at w3Schools.com. They keep a working glossary of CSS terms, along with examples you can noodle around with to see what’s what. Very good to keep around.

I’m not saying this is the perfect way to figure out how CSS works, but it’s pretty amazing how much education you can find without spending a nickel or setting foot in a classroom.

This entry was posted in diy. Bookmark the permalink.

Comments are closed.