What can the DOM do for me?

If you want to spend a lot of time working with CSS, then allow me to introduce you to the DOM, your new best friend. Through the elements tab of the DOM, you can look at each individual element on your page, what it contains, what contains it, what properties it inherits, how much space it takes up, margins, padding, etc. The DOM will even allow you to write CSS, and have it load onto your page in real time. In this way, the DOM is fantastic at telling you what is working, what isn't, and what might. It won't save your changes to your code, but it provides the perfect playground for testing different tools.

Guide

The first step to using the DOM is obviously opening it:

On Mac, the default command to do so is: Option + Command + J

On Windows/Linux, the default is: Ctrl + Shift + J

After inputting this command, your page should change to look like this:

From here, navigate to the elements tab via the dropdown menu next to where it says console.

This should cause your DOM to start looking like this:

Now Google's HTML might be a little too complicated to understand, so I'll be going to something a little simpler before explaining what all is occurring in the DOM elements tab. For the purpose of this guide, I'll be using: http://www.columbia.edu/~fdc/sample.html

This is a lot easier to understand.

So starting off, this top box in the DOM elements tab will allow us to look at our websites HTML directly.

Using the HTML drop downs, we can find the contents of any HTML element on our page, including elements contained within other elements. Hovering over these elements will highlight them on the page, showing us exactly what space they take up as well as how many pixels tall and wide it currently is.

Clicking on an element in this menu, selects it for the box below:

In this box we can see what CSS properties are being applied to each element, what the element is inheriting from its containers, etc. In this box we can even change the elements CSS properties manually.

Now these changes won't save to your code, but they are a fantastic way of testing different CSS properties without having to actually change your code.

As a side note, you may notice that opening the DOM causes your page to resize, which may affect the spacing of your CSS elements, making it hard to tell if your changes are working like you want them to. The simple way to fix this is by using these black bars,

and this view percentage drop down,

to change how your page is displayed in the DOM.

In my experience, these tools are more than enough to fix any problems caused by the DOM resizing your page.

Summary

The DOM is the main tool I use when troubleshooting my CSS. It gives me a perfect view of how my page is interpreting the code I am passing it, and it even allows me to change it straight from the browser, so I can test different kinds of fixes to any problem I have. As far as I'm concerned, using the DOM effectively is super important to making good CSS!