How To Use Inspect Element To Edit CSS (for coding noobs, like me!)

A few weeks ago I shared 4 blog hacks that make my life easier. In that post. I mentioned Inspect Element and how I use it to add custom CSS to my blog. I also asked you guys to let me know if you wanted a more detailed tutorial on how to use this, and some of you did! So, here I am to give you more details on how to use Inspect Element and a little more detail about custom CSS.

This is not a comprehensive tutorial on CSS. It’s also not the best method of doing custom CSS. I change the background of only two widgets, I change the size of my featured images and a few other minor things. So, for me, using Inspect Element is the easiest method, instead of teaching myself how to code it. If you’re someone who makes a lot of changes and wants your CSS to look very organized, well, you probably already know enough about CSS and don’t need this tutorial, or you might want someone who is more knowledgeable on the topic. Just tryin’ to keep it real for you guys. I am by no means claiming to be an expert here.

Let’s get started!

Some CSS 101

>> What is CSS & the basic structure:

Basically, CSS is what makes your blog pretty. It’s the makeup of your site. You use it to change the color of your background, the size of your text, the width of border lines. All the things that make your site visually appealing are done using CSS.

The way you would structure CSS in code is like this:

the tag {

item you want to change: the change you’re making;

}

And here is my attempt at explaining that: You would start out with “the tag”, which is whatever you are trying to change, followed by an open curly bracket. Start a new line, indent — this is where you make the changes to the tag. You would enter what you want to change (e.g. font size) followed by a colon, then the change you’re making (e.g. the font size you want it to be), ending with a semi-colon on another new line. You can have multiple lines of changes in between the brackets (e.g. font size, font color, font decoration)

That is the basic structure when wanting to make CSS changes. The next thing you need to know is what “the tag” is.

>> The tag is the most important:

The tag will either be a CLASS or an ID. Ok, that’s nice, but what are those?

The easiest way for me to remember the difference is that there can only be one ID but more than one CLASS. For example, you can only have one header, one full-page background, but you can have more than one widget. So, if you want to change the color of your background you would be using an ID, but if you want to change the font size of a widget’s title, then you would be using a CLASS.

In your code, an ID will be identified with a # and a CLASS will be identified with a . (also, you can not use spaces).

Here is how it would look:

#your-id {

item you want to change: the change you’re making;

}

.your-class {

item you want to change: the change you’re making;

}

 

So how does this work with Inspect Element?

If you’re anything like me and most of the mumbo jumbo above is enough coding for you to handle, then Inspect Element is for you.

Inspect Element is when you right-click on any web page, click Inspect. There you’ll see the CSS and HTML that makes the page run. It’s basically the inner workings of the site. From here you can make temporary changes, but also you can use this as basically pre-written code for you to enter into your CSS Editor.

>> Option 1: Use the style side (right side)

In the screenshot above, I simply went to my blog and right-clicked on the title of a widget, “Don’t miss a beat”, selected “inspect”, and the code came up. Notice that it is already focused on the title I had right-clicked on? On the right-hand side of the screenshot you can see at the beginning of the code this:

.widget-title {

the appearances

}

Below .widget-title is the CSS that makes it look the way it does. You can play around with those settings. You can change the font color, the weight, the spaces, etc., without actually making any permanent changes to your blog. For example, here is a screenshot of me changing the color and font size of the title:

(ps; I kind of like the font bigger there. Hmm, this tutorial has proven useful to me too!)

Let’s pretend I want to actually change my widget title to be that color and font size, I would basically copy and paste that code on the right (excluding the information I don’t need) and paste it into my CSS Editor on my dashboard. So, in my Custom CSS it would look like this:

.widget-title {

font-size: 20px;
color: #e47879;

}

That would result in all my widget titles having a 20px font size and the pink font color.

>> Option 2: Using the HTML side (left side)

The first option was pretty straight forward. Make your change, copy & paste (and remove extras you don’t need). Done. However, sometimes, you may have to dig a little deeper to make the change you want. For example, my sidebar consists of 8 widgets. I decided I wanted the background of the widgets to have alternating colors. With my theme, there was no easy way to just edit colors, there was a set background and I couldn’t even figure out what the normal CSS was. So, I had to use something else Inspect Element offers.

In the above screenshot, I have highlighted the widget I want to change the background of. If you hover your mouse over the different HTML (the stuff on the left), it will highlight what each line represents. In this case, I hovered until it highlighted the section of that widget that I wanted to change, the background.

The information you want from doing this is that VERY last line. Here is a closer look:

The arrow on the left is pointing at the code for that specific widget, not for all widgets. So, I took that so I can use that as a part of my TAG. I’m saying, “hey, only target this widget“. Now, I need to somehow say to only target the background of the widget. This is the arrow on the right.

If you look at the screenshot that shows what HTML I have my mouse on, you’ll see that it is the BACKGROUND of THAT WIDGET. That bit of code is what I want. I simply copied & pasted those two bits, added my change, and viola! It’s changed.

Here’s what my custom CSS would look like:

section#ubb_reviews-21.widget.widget_ubb_reviews::before {

background: #e7797a;

}

And this is what I mean by this is not an organized or clean method of custom CSS, but if you’re only changing a few things and are lazy, it works!

TL;DR

>> Option 1: Use style side

1. Right click webpage or specific item you want to change.
2. Look at the right column of inspect element.
3. Find what you want to change.
4. Make changes.
5. If you like it, copy it.
6. Paste into CSS Editor, remove anything you don’t need.
7. Save.

>> Option 2: Use HTML side

1. Right click webpage or specific item you want to change.
2. Look at the left column of inspect element.
3. Hover over until you see (on the webpage) the item you want to change highlighted.
4. Look at the very bottom static (never moves) line.
5. Use the necessary HTML by copying & pasting and adding the changes. (You may need to play around until you find the correct one).
6. Save.

WARNING: DO THIS BEFORE YOU MAKE ANY CHANGES TO YOUR SITE, PLEASE!

BACKUP your site.

PREVIEW changes before saving.

---

I’m really really hoping that was helpful. If you can’t tell, I’m not a teacher. I tried to explain it in the easiest way I could, but if something wasn’t clear PLEASE feel free to ask me to clarify! I’m not an expert nor perfect but I do want to try to help you as much as I can.