Beginner CSS Tips For Your Blog

For many people, their introduction to web design and the wonderful world of CSS is through blogging. They start off blogging because it’s so easy and you don’t need to know anything at all about design. Soon after, the desire to change the design of their site a little bit to accommodate some new idea takes over and they find themselves poking around deeper and deeper into how their fancy-dancy blog works.

Sooner or later, they’ll find that fat and juicy style.css file and their eyes will open up with the possibilities. If this is you, here are some tips and some things to keep in mind:

1. Have good typography for your main content. People come to your page, and continue coming to your page, because of your content. Of course you should have good typography throughout your page, but you should really make sure that your main content is very readable. Below is an example of some very readable typography. The background-color and color would probably be applied to the div of your main content and the rest of it to the <p> tag.

   background-color: white;
   color: #1c1c1c;
   font-family: helvetica, sans-serif;
   font-size: 12px;
   line-height: 18px;
   text-indent: 25px;
   margin-bottom: 20px;

2. Have nice styling for your blockquotes. More on formatting your blockquotes earlier this week.
3. Accommodate your commenters. If your blog doesn’t have an insane amount of comments, don’t make your commenters register before commenting. It is just annoying and way less people will comment. Also, have a nice looking textarea and submit button doesn’t hurt. There are plugins out there that let comments subscribe to the comments are particular posts, I know some visitors really like that (leave it unchecked by default though).
4. Test your changes on all pages of your blog. Since blogs use databases and run on things like PHP, they are a little tough to run on your local machine with out some pretty solid techy know-how. Thus, many people “go commando” and edit their CSS right on their live blog. This is a little scary, because you might really break something if you don’t know what you are doing, or even if you do! Everytime do any commando editing, make a backup copy of your css that you can upload again quickly if anything goes wonky. When doing this commando style changes, the tendency is to make the change and then reload the homepage and see your changes. Remember that (in most cases) CSS affects all your pages, not just the homepage! After making CSS changes, browse around your blog and make sure what looks like a good change on one page doesn’t bork another page.
5. Remember to test your changes in all the major browsers. Pretty self explanatory. If you are the mac-type, you are really going to have to figure out some way to view your browser in IE 6. That may be running Parallels, VMWare, Bootcamp, and old windows box you have in the closet, or calling your buddy at 3 a.m. to send you a screenshot. One way or another, it’s gotta get done.
6. Validate your CSS. Might as well through your CSS through the gauntlet and make sure it passes muster.