CSS Styling Using the Browser Inspector & Customizer

Dev Tutorials

Last Updated: Time to Read: 5 minutes

This article covers front-end development techniques for building Child Theme and Extension front-end CSS quickly using the Browser Inspector in the Customizer to ensure you get the correct selectors and avoid common pitfalls of incorrect style overrides.

Inspect Element + Child Theme CSS

If you have a webkit browser such as Chrome, Firefox, Safari or Opera, Inspect Element is available from the context menu and will popup a panel in your browser showing you the markup on the left and styles on the right (shown here in Chrome). You may also access additional enhanced inspectors via Extensions for Chrome, or via the Firebug plugin for Firefox.

inspect-element

Selecting a specific element (each shown on their own row) in the HTML window on the left, such as the<header> , will highlight the element in the preview to assist you in determining what is what:

inspector1

To select specific elements, you can either right-click them in the preview pane, or left-click the code in the left-hand HTML inspector window.

The CSS styles for each element are shown on the right side, with the most dominant selector (the .class-name or #id-name ) shown first.

In theory, the selector with the highest “cascade” value will win out. This means a style applied toheaderwill affect all header tags, whereas .header-site only affects elements with that class.

.wrapper-site header will affect all headers specifically within containers with a wrapper-site class, and.wrapper-site .header-site will specifically apply to headers within the wrapper-site with a class of header-site .

You can take this further by selecting specific HTML elements in the cascade. For example:
body > section
will select only<section> elements that are direct children of the <body>  tag. This practice does not always help you in terms of overriding parent styles, in which case you may be tempted to use !important.

!important is a flag placed inside a style that tells the browser to apply that property to the selector above all else. This is usually pretty effective, especially when you can’t find where the original is coming from, but should be avoided if at all possible, as this may interfere with styling on other elements you aren’t expecting, or break customization options in the core or extensions.

The problem with this is that it keeps anyone from being able to override your style, including Layers plugin authors. If your child theme is for a specific project and sports a unique style, !important is OK to use. If your theme will be distributed, sold or used by many different sites, avoid it at all costs!

In short, if you have to use !important to get something to work, it likely means something is wrong with your selector choice or how your stylesheets are loading. The only valid use of !important is when styles are being set inline, or the original style is using it.

The easiest way to see your restyling as you do it is with DevKit, where your styling is applied live in the WordPress Customizer. You can also just edit specific styles in the Brower Inspector sidebar by clicking on the property value, clicking or double-clicking the blank space at the end of the last property to add a new one, or you may view the stylesheet to see all related styles by clicking the link to the far right:

click_stylesheeteditstyles

Changes you make will take effect immediately to help you test and preview them. This also helps you grab the correct style selector.

OK but what happens if things still aren’t overriding correctly?

Using the Inspector is the fastest way to grab the parent selector for a style and determine how best to write your child style. This is great so far, but you may notice your attempt to change something isn’t working, even though you are using the same selector as the original stylesheet. In some cases, the property you want to change may not even be declared by the parent in the way you need it to be.

A good example is the text-based Site Title, which simply inherits the global link color by default. This won’t work well if you want a dark header and light body.

If you check it out with your Inspector, you will see the following:

sitename

 

If you clicked on the H3, you will notice the color is not set there. You might assume you can just add a color argument to .sitename  in this case, but because the element is a link, it will take the argument of the top-most selector in the cascade, as previously mentioned. The “a” selector is one of the most dominant there is. All you need to do in this case is make sure your style selects the <a>  of the .sitename :

If using Firebug, you can also right-click the Style pane and choose Add Rule (make sure the right HTML element is selected on the left), which will automatically provide you with the most exact selector to use, which in this case is
.sitename.sitetitle > a

Grabbing Page-Specific selectors

If you want to restyle a common element on a specific page, such as links, borders or fonts,  you will need to target the page by its template ID so the browser knows to apply your styles to just that page.

If you right-click the page and choose “View Source” or use the Inspector to view the HTML/source code area, locate the <body> element to view its class names:

bodyclass

In this example, the template selector for this page is page-template-fullwidth-php . We could also use just page  to affect ALL pages, but we want ONLY this page template.

Recommended Reading

Check out the following resources for further help on using the Inspector, the basics of CSS structure, or what property names to use in your styles.