Using Chrome Developer Tools to Modify CSS

or: How I Learned to Love the !important

Every site that you visit uses CSS. If it didn’t, it would look like plain black words on a flat white background with text left aligned to the side of your browser and no gutter, padding, or color to speak of. Even in an attempt to emulate a plain paper book, CSS should still be present in order to properly display the words you’re presenting. When you first look at CSS, it can seem exceedingly simple and easy to control, requiring nothing but an identifier and a key and value pair in order to specify which item should look which way. This deceivingly simple appearance can end up frustrating many front end designers trying to modify a site’s facade.

CSS stands for Cascading StyleSheet. This acronym hints at one of the frustrations that I’ve found new designers have. To get into it, we have to understand the identifiers that are used for selecting an element and the priorities applied to each. CSS uses identifiers to target the HTML element that needs to be styled. These can range from simple to exceedingly complicated based on the existing stylesheets and your needs. Let’s start by using Google Chrome to inspect the image below. Use your mouse to hover over the image, right click on it, and choose “Inspect.”

Once you inspect the image above, you’ll be able to see several attributes within the HTML element that are important to styling. There is the id, the class, and I’ve included some inline CSS. Inline CSS is typically considered bad form for multiple reasons, but as we’re covering as much as we can about styling, I may as well tell you about it.

HTML Elements and Their Attributes

In the image above, you can see the HTML element on the left of the DevTools panel and the styling on the right side. The less-than symbol ( < ) is the beginning of the element, telling your browser to render everything inside of that and its ending greater-than symbol ( > ) as a structural piece of your document. The ‘id’ attribute is a very important identifier that specifies unique elements on the page. There is also the class attribute, which specifies a type of element that can be used throughout your page multiple times, and needs to be styled a certain way. You will also notice the ‘style’ attribute, which is used for inline styling of an element and should only be used in certain situations.

Inline Styling

In the right box of the image of the DevTools above or in your own browser, you will be able to see the styles and the order in which they’ve been applied. The first – and highest priority to CSS – is the inline style that gives the image a solid gray border of 5 pixels. This styling is applied by an attribute titled ‘style’ that then specifies the key and value pair of CSS to be used.

The ID Attribute

In the listing after the inline style, you will then see the ‘id’ identifier, preceded by the hashtag/number sign. This symbol is specifically used for elements with that ‘id’ assigned to it and is placed higher on the priorities list because an ID should only be used once on a page and applies to very specific elements.

The Class Attribute

After that in the list of priorities is the class, with the preceding identifier of a period in the CSS. When styling using the class, you will be able to use that style across multiple different elements on your website and in the webpages. For example, .redTXT can be used to apply red font color to each element with a class of “redTXT.”

Etcetera

Scrolling further down the CSS style panel on the right, you may come across a selector simply identifying the HTML element used, in this case ‘img.’ Please note that there is no symbol preceding this identifier, simply using the element’s name is good.

These are some basic and easy styling selectors for you to use when starting. As a quick reference guide, and for more possible identifiers, you should check out W3 School’s entire listing of all possible CSS selectors.

Wait, Priorities?

Yup, Priorities. That’s where the ‘Cascading’ part of CSS comes in, and that’s what can get frustrating…

So, as you’re inspecting elements across web pages and attempting to apply changes to styling, you’ll notice that there are times when simply adding a selector like ‘p’ and attempting to change the font color doesn’t exactly work. If you’re using the above example of a class with “redTXT” on a paragraph element, you’ll notice that changing the font color to blue by using the selector ‘p’ won’t work. The reason for this is specificity and priorities. Using the element’s name as an identifier in CSS comes in at the lowest priority and will always be overwritten if a Class or ID is also used. Next comes the Class attribute, then the ID as the highest selector that can be used.

However, this is just the simplest of selectors. Sometimes, especially when you’re working with WordPress plugins, you’ll come across a selector in Google Chrome’s DevTools that looks like an entire sentence. This is, unfortunately, where the specificity of CSS comes in. If you’re looking to overwrite the style of an element and you don’t have control over the stylesheet that’s targeting it, you’ll need to find a way to make your target be more specific than what you’re competing with. What an arms race!

Why Are There Such Specific Selectors?

This is a hard one to answer, but sometimes it just comes down to someone either not wanting their style overwritten or having very specific elements they want to target. For instance, if a plugin uses an element with the class “content” and puts another element inside named “content_holder” and then wants to target yet another element inside of that? They may come to the easy realization that these class names are fairly common and may be targeting elements that they don’t mean to. As frustrating as it is to try to overwrite those targets, you may find yourself being overly specific at some point for very similar reasons.

One way to help find what exactly is styling an element is to move to the ‘Computed’ tab on Chrome’s Developer Tools panel:

In this tab, you’ll be able to see exactly what styles are affecting each element. Once you identify what it is you wish to change, you can click on the arrow on the left of the CSS key to see exactly where that style is being applied.

The the image above, you will be able to see that I have set the image’s ‘display’ property to ‘block’ in my theme’s stylesheet. The reason for this was so I could center the image on the page, but that’s another discussion entirely. On the right side of the CSS selector displayed in DevTools, you will see that the file ‘style.css’ is targeting this element on line 122. This makes modifications infinitely easier, because you can then open that file and go directly to the line stated in order to make changes.

What About A Plugin’s Overly Specific Targets?

In the case when you’re battling against another developer’s overly specific target, you can attempt to just be more specific. You can try to add ‘body’ to the beginning of your targeting string, which specifies anything within the body of the page. You can try to add your content’s container Class or ID in the proper place to overwrite another styling target. In this case, filtering through the elements on the page and making sure your targeting specifics are in the correct order can be a large headache, but that doesn’t mean you should give up.

In the worst case scenario? You can attempt to simply put “!important” after your styling value and before the semicolon like this:

1	p{ color: #FF0000 !important; }

This will usually apply that style as the highest priority that can not be overwritten and is therefore the nuclear option. You should keep in mind that this is even harder to overwrite in the future and can also be overwritten with a more specific !important.