Power Of Inspect Element

If you haven’t heard of Inspect Element, I’m about to change your life. In a really good way, I promise.

Inspect Element is a program that lets you examine the basic code (HTML & CSS) of any webpage and, within that webpage, any image, block of text, link, etc that you want to see.

This is extremely helpful if something is going wrong on your page. You’re sure you put the image in the post correctly, but it’s coming out all skewed or too small or not appearing at all. By opening Inspect Element, you can see what HTML or CSS is being applied to that image to muck it up for you.

It’s also helpful if the Web Wizards at www.yourfavoritesite.com are doing something super freaking cool on their page, and you have no idea how to do it but you really, really want to. If those Wizards are using HTML or CSS to do it, you’ll be able to see exactly what’s going on. If they’re using a widget or tool of some kind, you’ll also be able to see that inside the code.

Pretty amazing, huh?

MATERIALS

Inspect Element or similar program*

Curiosity

*Inspect Element is a feature of Chrome & Firefox, as well as a few other browsers. (DownloadChrome or Firefox.)

I also recommend Firebug for Firefox. Like Inspect Element, Firebug is 100% free, though they do suggest you make a donation to the designer. It also looks very similar to Inspect Element, so you’ll still be able to follow along with me here.

(Firebug has a few more fabulous features than plain ol’ Inspect Element does not, but we won’t be using them today. Another time, my friends!)

Step 1) Open Chrome to any webpage.

Decide which element on the page you want to inspect. We’ll start with my header because it’s kind of in-your-face-big and easy to inspect.

Step 2) Open Inspect Element

Right-click (on a Mac Ctrl + click) and choose “Inspect Element” from the resulting menu.

This will open the Inspect Element pane. It will be either it’s own smaller window, or it will open in the bottom half of your open window. You’ll want to pop it out so that you can see more of the webpage at one time.

To pop it out, click on the button in the lower lefthand corner of the Inspect Element pane.

Step 3) Understanding Inspect Element.

Inside inspect element, everything is in HTML & CSS. The program will open with the code for whichever piece of the page you clicked on highlighted. Here you can see the code for each piece of the page.

Between the brackets in the image above is the code for the header and everything inside the header. Whatever your cursor hovers over will be highlighted on the screen.

Here, you can see that the header is actually much larger than the image itself, and the pixel dimensions of the element highlighted are displayed.

You’ll find the code for the header image in the Branding div just a step underneath the Header div.

Now you can make note of the size of the image. Mine is 940px wide by 235px tall.

With that information, you can go into Preview or Photoshop and create a new image the correct size for the header. You can also see what kind of CSS was used on that element by looking at the panel to the right inside Inspect Element. That can give you a whole lot more information about that image, though my header doesn’t have any special code acting on it.

Step 4) Explore the Page. Before Inspect Element can be really useful, you have to learn where everything is in the code.

The Wrapper div holds the elements for the whole page. Inside that div (highlighted in Inspect Element here), you’ll find the Main div (follow the red arrow).

The Main div holds the code for the main part of your page: post area and sidebars. (Aptly named, right?) You can see in the above image that hovering over the main highlights on the page the post area and my sidebar.

Basically, anything in BLUE on the webpage is included in the line of code you’re hovering over. (You can’t see my cursor here, but it was hovering over the line of code the arrow is pointing to. A quirk of taking screenshots is that my cursor disappears. Woohoo! Great planning!)

Go ahead and hover over the code line by line and find the elements you’re interested in.

Step 5) Getting to Know the Post Area.

Inside the Main div, you’ll find more divs (shocking, I know) that control the posting area of your webpage. The Container div is highlighted here. Just to confuse you, within the Container div you’ll find the Content div.

The Content div actually controls the edges of your posts.

Remember the Wrapper div that held all the different pieces? Well, the Container div is a lot like that.

The Content div is where you’ll find the images and text, though. If you click the arrow next to the Content div to open it up, you’ll see a bunch of <p>…</p> These are the actual paragraphs of your post. You can hover over them until you find the element you’re looking for within your post.

Linked images will display an http:// location inside the code. They will also show a thumbnail of the image & its size inside Inspect Element when you hover over their code.

Now that I’ve made you look at that pictures about a bazillion times, I’m really wishing I’d picked a more flattering image to work with.

Inspect Element is how I learned that if you want to isolate something within a post, put it between <p> and </p>. (Seriously, I knew nothing before I started this blog.)

Similarly, if you want to group some things together, put the group of elements you want between <p> and </p>. For example, check out my Link Parties and Blog Hops page.

Obviously, the paragraphs of text are between a <p> and a </p>, but that’s also how I forced the buttons for the link parties to tile.

<p> is very powerful indeed.

Let’s move on to the sidebars.

Step 6) Getting to Know the Sidebars.

Some templates for WordPress will call your sidebar an “aside” area. Not all, though, and other blogging platforms mostly use sidebar as the terminology of choice. My template calls my sidebars “asides,” though, so that’s how it appears in my code.

My upper sidebar is called the Primary Aside and has a border.

The sidebar below it that contains my buttons does not have a border and is called my Secondary Aside.

You can see in their code they’re still considered part of the Main div. The clue is this part of the code: class=”aside main-aside” which appears in the code for both sidebar divs.

These divs are nested inside the Main div, so in theory you should already know where the code is located. But sometimes so many divs wind up open that it’s difficult to see right away where one is nested. So I rely on the code.

Whenever I add something to the sidebar in my dashboard, the code for it will appear within one of these two divs. So now I can just hover over them and find the code for anything contained in those sidebars.

Here’s the code for my welcome ribbon.

In my sidebar coding, anywhere you see “text” indicates an element that I used HTML to create. I’ll go over doing that next week.

So, you can either wait…

…or you can check it out with Inspect Element.

Any questions?

Tomorrow, I’ll have an update on my Project Linus challenge and an explanation for the bizarre post a few days ago. In the meantime, click here to see where I’m linking up!