How to Use View Source to Figure Out Wordpress Style Rules

If you are trying to modify a Wordpress blog theme and are having trouble figuring out which rules in the stylesheet apply to different parts of your blog page, here's a technique to help you figure it out.

Things You'll Need

• A Wordpress blog that allows modifications to the styles.css page
• A browser
• A text editor or HTML editor

Instructions

1. Open your blog in a browser window.

2. 

   Pick out something in the regular browser view that you want to change. Here's an image of a post from my blog. Suppose I want to change the way the headings look. The heading in this post is: "WCAG 2.0 released as Candidate Recommendation: Test Drivers Wanted."

3. Use the browser menu to view the page source. This is an option under the View menu in most browsers. Select the menu command that says "View Source."

   The page source will open, showing you the underlying HTML that built the page.

4. 

   Find a heading in the Source. The easiest way to skip through all that code is to find some particular text, say "WCAG 2.0 released as Candidate." Using the menu you can select Edit > Find and then type in the phrase you're looking for to skip immediately to that part of the page.

5. Here's what I found in my blog: From the source I learn a number of things about the heading and the styles. I learn that it's an h2, so perhaps changing the h2 rules will do what I want. I also see that the h2 is assigned to the class "entry-title," so that may be the rule I want to look for. Those two clues should be enough to help me quickly find what I'm looking for.

6. 

   For a Wordpress blog the styles are found in wp-content > themes > yourthemename > styles.css. Open the styles.css page and look for the clue words you found in the page source. In this example I looked for "entry-title." The styles I found in the rule you see in the image look like just what I need to make changes to the appearance of my headings. The rule in this example controls two different headings. If I didn't want to change them both, I would need to separate the styles into two different rules.

Tips & Warnings

• Make a backup copy of your styles.css file before you begin making changes. If you completely mess things up you can always go back to the original version.