how can you drill down to find out exactly what rules you need to be overriding to get your desired effects? What you need to do is learn how to identify the ID or class of an element; once you know this, you can accurately target your rules to that identifier. You have a few popular options for getting this done:
- If you’re using Google Chrome then you already have the tools ready to go. Simply right-click on the area you want to target with your CSS and click Inspect Element in the context menu to bring up the source of the page, where you can find out all the necessary information for targeting your new rules. As an aside, you can also change the CSS code live in the panel; these changes naturally won’t be saved, but it’s a simple way to see the effects of your CSS changes before you go to the trouble of applying them in the options. Be sure to use the proper format when adding your CSS by referring only to existing selectors and classes.
- If you’re using another browser such as Firefox it’s worth looking into the Firebug tool, that will help you when inspecting HTML elements and CSS properties (you can see how it works online on YouTube). If you try to set a style rule for something that doesn’t exist in the template’s style, you will not see any changes, so make sure you’ve got the ID or Class name down exactly before making changes; it will save you some frustration later! If you want to read more about this topic you can find out more in our simple CSS changes article.