To me, block are at the crux of everything that is good about Drupal. They provide tons of flexibility, add functionality to your site that you wouldn’t be able to get with say….Joomla, and overall learning to use blocks is the most important part of Drupal one could argue.

The only problem, and if you’ve ever worked with Drupal before then you know what I’m talking about, is styling those darn blocks. I was hoping in Drupal 5.0 they would provide an easy styling interface for custom blocks, like maybe a little button next to configure that said “style”. Then when you push the style button it opens up a window like the Google Adsense program
does. That would make this entire post not needed. Anyhow since Drupal does not give us this easy styling mechanism, here is how you would go about styling individual blocks. If you take a look at Criticalsole you can see that I went a bit crazy with styling each and every block, my style.css file is probably over 2500+ lines now.

Step 1 - Find the Block you want to Style

I’m going to take for granted that you know how to create a block, because if you don’t then maybe Drupal isnt’ for you. Just kidding, there are great tutorials for creating blocks on Drupal.org, use them. So finding the block, first I would suggest you fire up your Firefox browser. I’m going to get a lot of arguements here, but the reason I say use Firefox is because it outlines the source code so much better than the other browsers. When you can see a div class in blue that makes a huge difference. Wait maybe I should back up here, if you don’t know CSS then this might be hard to figure out. I’ll try my best to make it easy.

So once you’ve created a block, open up Firefox and View Page Source (you can view the page source by right clicking). Now what you are looking for, assuming you’ve created a block and it’s enabled for that page, will look something like the following: