How to Know Blogger CSS Rules

Want to customize your Blogger blog? Use this simple trick to match the CSS rules in a Blogger template to the appearance of the blog in a browser.

Instructions

Difficulty: Moderate

Things You’ll Need:

• A Blogger account
• A browser
• The browser's View Source menu

How to Find the CSS

1. Sign in to Blogger.
2. From the Blogger Dashboard, select the Template link for your blog.
3. Locate the CSS in the Blogger template. The CSS rules are in the head section of the document. Look for the CSS rule that controls the appearance of the element you want to customize. Sometime it is obvious which CSS rule controls the appearance of the item. In that case, change the CSS rule. Save the template and republish the blog.
   
   Other times you want to change something and it isn't so obvious which rule controls it. If that's the case, follow the steps in the next section.

How to Use View Source to Find the CSS Rule to Customize

4. View the blog in a browser as readers would see it.
5. Find View Source in the browser menu. This is most often under the View menu item. It may say "View Source" or "Page Source."
6. Find the element you want to style in view source Search through the page source for the part of your blog's appearance you want to change. For example, suppose you want to change the appearance of the post titles. You noticed a class in the CSS called .post-title, but it doesn't have all the rules you want to change. Looking through the page source, you see the HTML shown in the image.
   
   Aha! The post title is also controlled by rules for the h3 element.
7. Use what you learned from View Source to find the appropriate rule in the Blogger template. In this example, customization to both the .post-title and h3 rules get results.
8. When customization is complete, save the template and republish the blog.

Tips & Warnings

• The Firefox browser with the Web Developer Toolbar installed can find element names quickly without reading through View Source. From the Web Developer Toolbar, choose Information > Display Element Information.
• What can you do if the obvious CSS and the CSS rules you discovered using view source don't change as you want? Sometimes a CSS rule higher up in the cascade effects the part of the page you want to customize. Look at rules such as the body, #content or #sidebar when this happens. The rule affecting the element you want to change may be in one of these declarations.