The rise of personal publishing (a.k.a. blogging) in recent years is due, in large part to popular platforms like MovableType (my first love), WordPress, ExpressionEngine, Drupal, etc. and their elimination of the need for a web publisher to have any technical skills. All that is required to start a blog is an account at a hosted service like WordPress.com or TypePad.com. In fact, these are wonderful ways to enter the blogging fray. But Blogging Tips is for people who want to take their blogs to the next level, and doing so requires a bit of skill above the baseline.
One such skill is modifying CSS files in templates and themes. CSS is an acronym for Cascading Style Sheets and using them allows you to make a single style change and see that change reflected throughout the entire site. Not too many years ago, changes as simple as font size required editing every page of a site. The uptake of CSS in the greater design and develpment community in the last five years has, in my opinion, been a major factor in the explosion of personal publishing that we see today. CSS is responsible for many of the small details on your blog that make it aesthetically pleasing and tweaking these details can make your site stand above the rest.
As is the case when learning any new skill, having the proper tools in your tool box makes all the difference. Learning and improving your CSS skills is no exception. So, without further ado, I’d like to introduce 5 Essential CSS Tools for Bloggers.
- Firefox Web Browser. If you’re not already using Firefox as your default web browser, you should be. At the very least you should have it installed for testing your website because there is a good chance that many of your blog’s readers are using Firefox. It’s a great tool for CSS editing because of the many browser extensions written exclusively for this purpose. In fact, three of the five essential tools on this list are Firefox extensions.
- Aardvark Extension for Firefox.
In order to make changes to a page’s stylesheet, you need to know how the html page relates to the stylesheet. The Aardvark extension makes this easy. After installing the extension, start it with Right-Click+Y, and then hover over the page’s content. You’ll be presented with the element type (image, paragraph, heading, etc.) and any classes or id’s that belong to that element. In the image on the right, Aardvark shows us that we’re hovering over an image with the id of “logo.” Knowing this, we could go to our stylesheet and make changes to all instances of the logo image on the site. For instance, if we wanted to add a 3-pixel blue border around every logo image on the site, we would add img#logo{border: solid 3px #ff0;}to the style sheet. But where do we find the style sheet? - Web Developer Toolbar Extension for Firefox. The CSS tools embedded in this powerful extension alone make it a must-have for any serious blogger. Ctrl+Shift+E after installing this extension allows you to edit any style sheet associated with the current page (most standard themes only have one style sheet). Changes made to the style sheet during editing show immediately in the Firefox browser window allowing for live editing of style sheet files. This live editing makes learning CSS much faster and much more fun. It also makes editing and troubleshooting much easier for advanced CSS tweakers. To make changes to your website based on changes made in this editor, you’ll need to save the CSS and upload it in place of your current stylesheet (create a backup first!).
Note: Ctrl+Shift+Y in the web developer toolbar also imitates the Aardvark extension, but I prefer Aardvark because is shows style information directly beside the element.
- ColorZilla Extension for Firefox.
This handy extension allows you to determine the RGB or hexadecimal color code for any color on any website across the web. This extension combined with the web developer toolbar’s live editing make quick color changes to a website easy and painless. - O’Reilly CSS Pocket Reference.When you’re ready to really start making changes to CSS files, this great pocket reference is an indispensable asset. It contains every CSS style attribute you could ever need and is organized in a way that makes it faster than using Google to search for the attribute and selectors that you need to make changes to your site’s design. 5-Stars!
Bonus: CSS Cheat Sheet from ilovejackdaniels.com. If you’re just getting started an only need the basic CSS attributes and selectors at hand, this free style sheet is perfect. Take a look around their cheat sheet section and you’re sure to find others that interest you as well.
This is by no means an exhaustive list, but these tools combined with a willingness to experiment and learn will put you on the path to become a CSS ninja in no time. I enjoy experimenting with CSS and exploring the style sheets of site designs that catch my eye. Following the CSS tag on del.icio.us will also help you run up the CSS learning curve more quickly. Best of luck as you make your blog look even better!
What tools did I miss? What did I fail to explain? Please let us know in the comments.
Jamie Harrop | July 9th, 2007 at 5:08 am #
Somebody sure does love FireFox!
I’m an Opera man myself, but I use Fx for testing.
If anybody is looking for some CSS tutorials, I always recommend W3Schools. http://www.w3schools.com/css/default.asp That’s what I used many years ago when I first started playing with style sheets.
Ryan Stewart (Post Author) | July 9th, 2007 at 5:13 am #
I certainly do love Firefox Jamie!
I like Opera too, but these extensions (and a few others) are one of the main reasons I use Firefox daily instead of another browser. I often find myself looking at a site and asking, “How’d they do that?” With Firefox, I can quickly find out.
W3Schools is great. Thanks for adding that. Their step by step tutorial is a great way to accelerate learning of CSS (or many other scripting/programming languages for the web).
Thanks for the comment!
cooliojones | July 9th, 2007 at 6:06 am #
These are some great tips, especially the ones about Firefox. I actually did a whole post on the differences between Firefox and Internet Explorer, in case people really don’t believe there are some. You can access that post –> here.
Tara1 | July 9th, 2007 at 6:47 am #
I have been trying to learn CSS, and have found CSSEDit by Mac rabbit (mac only) excellent for trying to syle pages. It allows you to download the stylesheets from live web pages and view what bit is what. Great for a newbie like me
GoddessCarlie | July 9th, 2007 at 7:14 am #
Thanks for ColourZilla - I’ve been wanting something like that!
Kevin | July 9th, 2007 at 8:37 am #
Great post Ryan
Im an opera user too but I still use Firefox from time to time. Those css cheatsheets are incredibly handy 
Celebrienne | July 9th, 2007 at 9:03 am #
Ryan, thanks for the tips - there were 2 or 3 I didn’t know of.
One little correction though on #2: IDs are meant to be given for elements which only occur ONCE per page (such as a header, footer, logo etc.). Using multiple elements with the same ID on one page will not validate (W3C). If you have multiple elements with the same attributes per page (like headings, columns, etc.), you need to use CLASSES instead.
There’s a handy little standalone tool named Color Cop which is a good alternative for ColorZilla. Couldn’t live my web design life without it anymore
If you want to take CSS to the next level, go to CSSPlay.
Arpit Jacob | July 9th, 2007 at 12:08 pm #
how could you missed out FIREBUG … you dont need any of the other tools.
Tay | July 9th, 2007 at 5:04 pm #
Thanks for posting this, ColorZilla is just perfect. I’m getting it now.
Ryan Stewart (Post Author) | July 9th, 2007 at 8:18 pm #
@Celebrienne, I’m not sure what part of #2 you’re correcting. I agree with the W3C that id’s should only be used once per page - which is why I said you could change the stylesheet to make changes to the entire site. If you’ll let me know where it was unclear, I’ll change it. Thanks also for Color Cop. I’ve used it in the past but had forgotten about it.
@Arpit, I’ve tried FireBug and do use it from time to time, but I must say that I just don’t find it to be very user friendly. Also, for the type of css editing that most bloggers do, FireBug is a bit of overkill. Thanks for the comment.
TechZilo | July 10th, 2007 at 9:03 am #
Funny thing, this - I had posted a list with all these tools, and much more, about a month back. My blog was inactive since, so that’s the latest post you’ll see. I plan to restart posting TODAY itself, though.
TechZilo | July 10th, 2007 at 9:11 am #
sorry for the double comment but forgot to ask, Can you link to me to that post?
Michael | July 10th, 2007 at 10:16 pm #
Thanks for the tips on the CSS. I have been learning it slowly but surely. This information shoule help me out. Thanks for posting.
Susan Foing | July 11th, 2007 at 2:03 am #
Very helpful, thanks for sharing.
Ryan Stewart (Post Author) | July 11th, 2007 at 4:45 am #
Thanks Michael and Susan. I’m happy that it’s helpful.
Is there anything in particular that you’re having trouble with as you learn CSS? What topics would you like to see future articles cover?
Celebrienne | July 11th, 2007 at 5:38 am #
Ryan, I reread #2 again and noticed I did you wrong. There’s nothing to be corrected. I just thought that by “make changes to all instances of the logo image on the site“, you meant that there is more than one instance of the logo on the site (i.e. using an ID in that case would not validate).
If you’re familiar with CSS and font-sizing that would be a really great tutorial/post. I’m still confused about all the em-stuff. Might be an overkill for CSS newbies though.
Ethan | July 12th, 2007 at 8:22 am #
WeLoveJackDaniels too!
Dave Child’s cheat sheets are design! We had some printed and laminated at NoteBind.com. Really nice. For something more than ILoveJackDaniels’ CSS , DeepX has a more comprehensive CSS sheet - and is really nice as a pocket reference!