Using Your Browser to Help Create Custom CSS Styles

Many WordPress users (and non-WordPress users alike) are very new to code, and it can be quite intimidating. I’m going to show you a way to use your browser to help you decipher the CSS styles that apply to objects on your page, and also to create new code that you can then add to your stylesheets.

I use Chrome as my primary browser and keep IE, Safari, Opera, and FireFox on my computer for testing. It really doesn’t matter which browser you use, as each one has it’s own set of developer tools that you can use to troubleshoot and play with CSS live in the browser. But first, a little course on Cascading Style Sheets, or CSS!

What Exactly is CSS?

css-codeCSS is what makes your page pretty. The cool thing about CSS code is the first word in the acronym – Cascading. This simply means that a style applied to an element can be overridden anywhere else in the file. Or it can even be overridden in a totally different stylesheet file.

CSS is based on specificity, which means the most specific selector will take precedent over less specific selectors. Selectors are the blue code in the box to the right, where declarations are the code inside the blue curly brackets. Each declaration is made up of a property and a value. Properties are the salmon-colored text, and the values are the yellow text.

This allows you to do things like define a button with a border, but then later assign a different border color to the button’s hover state (when the mouse goes over it).

The latter border style will override the prior one, resulting in a different border color on hover. But any of the other properties you assigned early on still apply, like font color or background color, as long as there is not another more specific selector to cause a declaration to be overriden.

CSS Specificity for Classes and IDs

This is kind of a complicated thing to wrap your head around, but I’ll try to explain it as basic as possible.

Classes are applied to elements in HTML like this:

<p class=”bigfont”>

They can be combined and any number of different classes can apply to an element:

<p class=”bigfont redcolor”>

And you can reuse classes throughout your page:

<p class=”bigfont redcolor”>Text here</p>
<p class=”bigfont redcolor”>More text here</p>

Then in the CSS code, you would target that element like:

p { } – applies to every paragraph tag on the page
p.bigfont { } – only applies to paragraphs with the ‘bigfont’ class
p.redcolor { } – only applies to paragraphs with the ‘redcolor’ class
p.bigfont.redcolor { } – only applies to paragraphs with both ‘bigfont’ and ‘redcolor’ classes applied

Which of those selectors is the most specific? Yup, the last one with both classes in the selector. So any code you add between the curly brackets will override any of the same declarations in the prior two selectors.

Now IDs are similar to classes in that they allow you to create CSS selectors and target elements. But there are some big differences between IDs and classes.

  • You can only use one ID on an element. You cannot combine them like you can classes.
  • You can only use an ID once on a page. You cannot reuse them like classes.

So you cannot do this (combine IDs):

<p id=”bigfont redcolor”>

Or this (duplicate IDs on the same page):

<p id=”bigfont”>Text here</p>
<p id=”bigfont”>More text here</p>

That’s what classes are for. IDs are reserved for use one time on your page and one time only. 99% of the time you can achieve what you need to just using classes. IDs can be used on things like page layout sections such as header, content, sidebar, footer, etc. as you know those will only appear in the source code once.

Things like paragraphs that will repeat within the page require classes, not IDs.

So for example, combining classes and IDs might look something like this:

<div id=”content”>
<p class=”bigfont”>Title here</p>
<p class=”bigfont redcolor”>Text here</p>
<p class=”redcolor”>More text here</p>
</div>
<div id=”sidebar”>
<p class=”bigfont”>Title here</p>
</div>

In the CSS code, we might use these types of selectors to style the HTML:

#content p { } – targets only the paragraphs in the content ID
#content p.bigfont { } – targets only the paragraphs in the content ID with the bigfont class
#content p.bigfont.redcolor { } – targets only the paragraphs in the content ID with the bigfont and redcolor classes
#sidebar p.bigfont { } – targets only the sidebar paragraphs with the bigfont class
p.bigfont { } – targets paragraphs in BOTH the content and sidebar IDs that have the bigfont class
p { } – targets all paragraphs anywhere on the page

In order of CSS specificity:

p
p.bigfont – overrides previous p selector
#content p – overrides all previous selectors
#content p.bigfont – overrides all previous selectors
#content p.bigfont.redcolor – overrides all previous selectors

That should give you a little better understanding of how classes and IDs work and how we can target them in the CSS code by using specific classes and IDs in our selectors.

Browser Developer Tools

Each browser has it’s own set of built-in tools that you can use to inspect a lot of things that go on behind the scenes of any website.

You can browse the page elements (basically anything on the page like text, images, etc.), view the browser console and find errors, view all the files that are loaded with every page, find out how long each file takes to load, discover which scripts are causing rendering delays, and much more.

browsers

All you need to do to access these tools is browse to the page you want to inspect and press F12 in Windows or Cmd + Option + “I” (that’s a capital i) on the Mac. In Safari, you may have to enable the tools by choosing Preferences > Advanced > ‘Show Develop Menu in menu bar’ first.

An alternate way to access the developer tools is to right click on an item within the browser window and choose the “Inspect” or “Inspect Element” option from the context menu.

right-click-inspect

Go ahead and try it right now by pressing F12 or right clicking somewhere on this page.

Discovering What CSS Styles Apply to Elements

Once you open the developer tools, you have a vast assortment of information at your fingertips.  But we are only concerned with the CSS styles in this tutorial.

I’ll be using the Chrome developer tools for this tutorial, so if you prefer a different browser, your settings may be slightly different that what you see in the tutorial.

When the developer tools open, you will normally be in the Elements section (or DOM Explorer – DOM stands for Document Object Model), which has the page source code in the left pane and the CSS styles in the right pane. Chrome developer tools also feature a lower panel where you can display the Console or other resources.

 

Web Developer Tools Panel

When you right click on an element in the browser, the developer tools will select that item in the source code panel and show the relevant CSS styles in the right panel.

It also highlights the element within the actual page and shows information like margins, padding, CSS classes, and element dimensions. As an example, let’s inspect the browser icon image found earlier on this page.

Begin by right clicking on the image and you will get the option to inspect the element:

right click for dev tools

The developer tools panel will open and the image will be selected and highlighted in the source code:

Developer tools selected

Then hover over the highighted code in the inspector panel, and the image is highlighted in your browser:

Image selected

The peachy color surrounding the image indicates how much margin is applied to the element in the CSS code. In the case of this image, the margin is set to 30px auto, which is shorthand for 30px of top and bottom margin and auto margins on the left and right. This results in a centered image.

The yellow highlighted tooltip gives the CSS classes applied to the image: noshadow, aligncenter, wp-image-30062, and size-full. It also provides the dimensions of the image of 496px wide by 103px tall.

In the right panel of the inspector, you are presented with every CSS property that is currently applied to the inspected element. CSS works by using ‘selectors’ which are classes or IDs that can be applied to the element.

Every class or ID from applied to an element OR the element’s parents can be used to target an item on the page for styling with CSS.

The example image has styles applied based on the aligncenter and size-full classes that are attached to the image as shown in this screenshot.

Let’s break down that selector and see what it does. The img selector targets ANY image tag on the page regardless of size or location. Adding the aligncenter selector targets ONLY images that are set to have center alignment. And the size-full class further filters out images that are any size but full size. So the result is the CSS style will only apply to images that are centered and full size on the page.

I created this rule in the stylesheet so that large post images have margins set to give a little white space around the image, and it adds a white border that is 2px wide around all sides of the image. The border-radius property removes any rounded corners that may be applied from a previously applied style.

Tutorial update: After creating the screenshots for this tutorial, I noticed that images were appearing slightly blurry in the browser but they were sharp as a tack in Photoshop. The issue was when applying the 2px border around the image and having the box-sizing CSS property set to ‘border-box’.

This makes the browser resize the image to accomodate the 4px of border width (2px + 2px) to fit into the width and height values as set by WordPress when inserting images in the browser.

I removed the border property from images and instead am using two box shadows, one is 2px white and the other is the slight drop shadow effect. This prevents the image from being resized to accomodate a border. A box-shadow has no effect when using a border-box value for the box-sizing property, which tends to be set for all elements by default in most modern WordPress themes.

So if you view the CSS code for the browser icon image on this page, you will no longer see a border property in the CSS. And if you have the same problem on your site, now you know the solution!

If you notice the box-shadow property is crossed out, that’s because of the noshadow class that I added to the image when inserting it in the WordPress editor. Remember the list of classes that were shown in the image’s yellow tooltip? The noshadow class removes the previously applied subtle drop shadow to post images.

When I scroll down the CSS panel a little bit, the styles that apply to the noshadow class are visible:

You can see the box-shadow property is set to none with the !important declaration. The ‘none’ removes the previously applied shadow to images, and the !important forces it to override any previously applied box-shadow, regardless if the selector is more specific that this one.

If you notice the border and border-radius properties are crossed out, this is because the img.aligncenter.size-full selector in the previous screenshot is MORE SPECIFIC that just using the noshadow class on the img tag. This results in those styles overriding the styles in this selector. This is how specificity plays into CSS and why it’s important to have a grip on how you can use classes and IDs to control how elements display on screen.

Editing CSS in Browser Developer Tools

The developer tools panel is not only useful for viewing the styles applied to any object, it’s perfect for actually modifying and creating new CSS code and having a live preview of the result.

Modifying exising CSS for any selected element is very simple. You simple click on either the property or the value within the CSS panel to enable editing.

Edit CSS in Developer Tools

Once selected, you simply modify the value and as you change it, you will see the element change immediately within the browser to reflect the new settings. So in our example, if we make the following edit:

Modify CSS with Dev Tools

Our browser updates by removing the 30px of top and bottom margin like this:

Modified image

You can not only edit existing declarations, but you can add now ones in two different ways.

The first way is to click on the last declaration in the selector and press tab until it starts a new entry where you can first enter the property and then tab again to enter the value.

Here is an animation showing edits to existing declarations and adding a new one for padding around the image

Dev tools animated

 

This is a great way to be able to visualize changes in CSS code as you make them. After making changes, you can simply highlight and copy just the declarations or the entire selector including the declarations and paste them into your stylesheet.

Developer tools also allows you to add new classes or IDs to elements in the left source code pane. You simply select the element you wish to add a class to and right click. You can choose to edit the existing attribute if classes already exist, or you can add a new attribute (class) if the element does not have one.

After adding a new class, you can add a new CSS selector for the class by clicking on the plus icon in the CSS pane. It will build a new selector based on the classes applied to the element and you can add the property/value declarations as needed.

Here is an animation showing how to add new classes and build new CSS selectors based on those classes

Add class animation

As with the previous example, once you have styled the element you can simply highlight the entire selector in the CSS pane and copy/paste it into your stylesheet file. Then go into your HTML file and add the new class you created to the element you wish to apply those styles to.

Styling Element States like Hover and Active

Some styles only apply when an element (like a link, form field, or button) is hovered or has focus. There is an easy way to style these states using developer tools.

Next to the plus icon in the CSS panel is a thumbtack icon that allows you to simulate active, hover, focus, and visted states. When one of those are clicked, the element in the browser will display the CSS styles for that state, and the CSS panel will show the styles that apply to that specific state.

Here is an animation showing how to apply a hover state to a button and change the :hover CSS styles

CSS style hover state

Tutorial Wrap Up

We covered a lot of techniques for using the built-in browser tools for creating and modifying CSS code. Hopefully this information gives you a new way to troubleshoot and create CSS without having to actually edit your stylesheet until the code has been finalized.

There is a TON of information available in the developer tools that we didn’t even touch on here, so I encourage you to look around the different tabs and explore how the tools can help you troubleshoot issues on your site or just help you speed up and optimize your site.

We hope you enjoyed the tutorial and happy coding!

Enjoy the Read? Share some Love!