Now that we have a handle on CSS specificity, let’s get a tool to make this process super easy.
Browsers & Extensions
Before we start, you really need to get a browser that is meant for development and troubleshooting. I strongly recommend downloading Chrome. It’s what I will be using for all of the examples in this tutorial. You can also download Firefox with the Firebug extension which will accomplish the same thing.
Step 1 – Find the element you want to style
For this example we’re just going to visit wordpress.org. So open Chrome and browse to that site to follow along.
Once the site is open, we need to decide what it is we want to style. In this example I want to modify the search box in the upper left-hand corner of the home page. Let’s say we want to make the input field a little wider than it currently is.
While in Chrome, right-click on the element you want to style and select “Inspect Element” in the context menu that appears. You should get a box at the bottom of your browser window that looks like the one in step 2.
Step 2 – Navigating the Element Inspector in Chrome
There is a lot of info available here, but we are just going to focus on the currently visible areas for this tutorial.
One the left side you have the HTML of the page. You can browser through the entire markup here and expand and collapse the various elements of the page. Since we selected a specific element when we called the Element Inspector we can see that the element we want is already highlighted.
On the right side we have all the styles that affect this particular element in one way or another. These are displayed from the most to least specific. As you scroll down the right side you will see many elements that are crossed out. These are styles that are being overridden by a more specific rule as you scroll back up.
The very first thing you see on the right side is this…
element.style { }
This is populated with any inline styles that exist for that element. After that are all the other rules that affect the element in descending order.
Another piece of helpful information is that to the right of each rule you will see something like this, wpf.css:903. This is the file and the line number this particular rule is located. This is extremely helpful if you plan on changing the ruled directly. Keep in mind, if you are not the designer of the WordPress theme and/or plugin you are using or it wasn’t built custom for you, you probably shouldn’t edit the files directly. More on that later.
Step 3 – Writing your new CSS rule
Now that we’re familiar with the Element Inspector panel it’s time to make some CSS changes. First we need to know the best rule to use. If you rule is going to be located after the existing rules (for most this would be the case) you can pretty much use the very first rule after the element.style in the right side of the panel. Our current rule looks like this:
#head-search input.text { background: #fff; border: 1px solid #bbb; margin-right: 6px; width: 130px; color: #aaa; float: left; font-size: 12px; }
I now have everything I need to change this element. I can override the style it already has applied or add new ones. Experiment with this You can actually make temporary changes right with the inspector panel. Double click on a style and tab through to edit or add new styles and see your changes live in the browser.
In some cases you may want to make your rule more specific. Perhaps because you your rule will be output before the existing rule. In this case we can simply add something to the rule to give it a little more weight. In our case the ID #head-search is applied to the form tag so there is a really simple way to increase the weight by 1.
form#head-search input.text { background: #fff; border: 1px solid #bbb; margin-right: 6px; width: 130px; color: #aaa; float: left; font-size: 12px; }
All we did was attach the form tag to the main ID that was applied to that tag from the HTML output. This rule is now assigned to any input that has a class of .text that’s inside a form with an ID of #head-search.
There is a lot more we could go over so please feel free to ask any question you have in the comments below. To close let me leave you with this extremely important tip.
Never update CSS files directly in your theme or plugin unless it was custom built. The reason is when that theme or plugin gets updated all your changes will be overwritten. Instead consider including these styles with your own custom plugin or use one from the WordPress Repository: Custom CSS.
Mathew Porter says
Nice to see that people structure their css markup in the same way that I learnt.
CN says
Wow, I never knew about this. Super helpful!
abercrombie Italia says
nice site, all posts are very nice.
Chandran says
I have been using Ninjaforms since I launched my website. Loving it all the way.
Hi, could you show me how I can stretch the “submit” button full width and center the wording, please.
Thanks.