Welcome to Part 2 of our 3-part WP Ninjas series on writing CSS for WordPress! In Part 1 we broke down the basics of WordPress CSS and what a CSS rule looks like. If you’ve not read that and aren’t familiar with the working pieces of a CSS rule, hop through this link and give Part 1 a read now.
If you’re comfortable with Part 1, great- you understand the fundamentals of what CSS is and what a rule looks like. We didn’t really get much into how to actually analyze a page to find the HTML elements you need to target, and how to apply a rule to that target HTML element there, though. That’s what we’re going to dive into here in Part 2.
The ultimate goal is to have you comfortable cracking open your WordPress install and confidently making permanent changes to a page. We’ll tackle that in Part 3, but it’s useful first to get some practise playing with different rules in a way that has zero risk of borking a page. Let’s look at how to do that now!
Live CSS Editor & the Element Inspector
We need 2 basic (and free) tools to play with today. The first is already in your browser, and that’s the Element Inspector. Right-click anywhere on a page and you’ll see in the pop-up box that opens an option called Inspect (Chrome), Inspect Element (Firefox), or similar. The Element Inspector is what we’re going to use to identify the HTML element we want to target.
My favorite tool for making non-permanent styling changes to a page is Live CSS Editor for Chrome. There’s a variation of it for other browsers (Firebug for Firefox, for example), but the simple usability of Live CSS Editor is hard to beat. For that reason, I’ll be using Chrome here.
So, fire up Chrome, install Live CSS Editor, and let’s practise identifying HTML elements on a page and writing some rules to change them!
Using the Element Inspector to Identify HTML Elements
Using the Element Inspector is easy. Like I said above, just right-click/Inspect and there it is. Understanding what the heck you’re looking at can be a different story. So, let’s break it down.
Reading the Element Inspector
First, choose a page you want to play with and then find a part of that page you want to change. I’m going to head over to the Ninja Forms home page. Scrolling down to the bottom, the Subscribe button of our newsletter form bugs me. I want that thing to be red so it will be more noticeable. Right-click/Inspect on the Subscribe button, and the Element Inspector opens. Like so:
The area I have circled in red is the overall HTML document for this page. Since we’re on a WordPress site, the HTML you see here doesn’t actually exist as a single, static HTML document but rather is the sum of the HTML pertaining to this page. That code lives in the many .php docs that make up your WordPress install. We can see it all in one place with the Element Inspector, which is pretty neat. To the right of this area, you can see the current CSS rules in place that affect this element.
Note now the grey highlighted area. Let’s zoom in on this:
This highlighted area is the HTML element you right-clicked on when you opened the inspector- the Subscribe button in our case. We can see here that the HTML Input Type of our Subscribe button is “submit”, that this specific element is named “_ninja_forms_field_250”, the Class names are “ninja_forms_field” and “button”, and its ID is “ninja_forms_field_250”. All of these can potentially be used as the Selector in our CSS rule depending on what we want to do with it. We’ll get into the nitty gritty of that in the Writing a CSS Rule section below.
Identifying Elements in the Element Inspector
You’ll notice that if you right-click/inspect a different part of the page, this highlighted section changes. Additionally, if you mouse over different parts of the HTML section, you’ll see the parts of the page the HTML applies to highlight in blue.
Using this we can quickly identify other elements we might want to target. For example, maybe I want to the entire area around the newsletter signup form to be red rather than the Subscribe button. Mousing over the HTML, I see that specific area has the ID “ninja_forms_form_38_all_fields_wrap”, and the Class name “ninja_forms_all_field_wrap”. Let’s move on now to writing a rule to target these elements we’ve identified!
Writing a CSS Rule
Choosing the Selector
Our first order of business is selecting a Selector. I began saying I wanted our Subscribe button to be red, so let’s go with that. We identified the HTML elements that pertain to the Subscribe button above. To recap:
The HTML Input Type of our Subscribe button is “submit”, this specific element is named “_ninja_forms_field_250”, the Class names are “ninja_forms_field” and “button”, and its ID is “ninja_forms_field_250”.
So we have a few options for the Selector:
- Input Type
We only want to change this one Subscribe button, so that narrows our options. Choosing the Input Type here would target all the HTML elements on your website that are designated as “submit”. That would include at the very least every submit button of every Ninja Form on your website. The same is true for the Classes “ninja_forms_field” or “button”. No bueno.
That leaves us Name and ID. Both are specific to the individual field, so we’re good using either of them. It’s typically best practise to use the ID or Class of an element whenever possible, so we’ll settle on the ID ninja_forms_field_250 as our selector.
Building the CSS Rule in Live CSS Editor
Good news: you’ve done the hard part already! Now we just have to write the CSS rule, and that’s relatively easy. You can double check with Part 1 if need be to refresh on the parts of a rule. Once you’re good, click the CSS icon in the top right of your Chrome window that appeared after you installed Live CSS Editor.
Our ID of course is ninja_forms_field_250, and since it’s an ID it’s preceded in the rule by a # (remember this list of selector references from Part 1). Background-color is the Property we want to change with our Declaration, and #ff0000 (those are zeros) is the hex code for red which will be our Declaration’s value. Our rule then is written as follows:
And now, in action:
Now that you have this method down, you can practise doing all sorts of things to a page completely risk-free. Play around for awhile writing your own CSS rules and see what all you can do- practise really is the best way to learn. To help give you some ideas of what you can tinker with, here’s a massive list of Properties that you can use to change all sorts of things on a page. You’ll also find Values in the left-hand sidebar.
Go to town, have fun, and in Part 3 we’ll look at how to turn what we’ve learned here into permanent styling changes on your WordPress website. See you then!