Understanding the CSS in a webpage

Google Chrome has a useful tool for inspecting CSS in webpages.

Chrome comes with many useful tools that can be brought up by right clicking on a webpage and pressing “Inspect” or Ctrl+Shift+I .

On the Elements tab inside the Dev Tools window, you can click any html tag to see what CSS is affecting it.

Styles Tab — The Art of War

The styles tab lets you see in great detail, all the battling CSS properties and their origin.

In the top right, we can see that the code comes from the file style.css line 222. The second section of code comes from User Agent Stylesheet and represents the default styling that the web browser applies to all pages.

The part saying input at the top left of each section shows that this code is being applied to a text input. This could be a textbox, radio button, checkbox or many others.

The red text represents the properties that the section of code is attempting to apply to the tag we selected.

We can see in the red text, that the User Agent Stylesheet is trying to change the background-color to white. This text however, is crossed out. Style.css has also defined that it wants to change the background-color to grey. Because someone has specified they wanted to change the background-colour in style.css, the User Agent Stylesheet was forced to yield.

CSS Hierarchy

Which CSS wins is dependent on how specific the sections of code are.
Style.css won over User Agent Stylesheet because nobody specifically asked the User Agent to style that — it was just the default.

If you have Style.css vs Style2.css, it becomes more difficult to determine but the same rules still apply. Consider the situation where Style.css specifies it wants all text inputs coloured grey, and Style2.css specifies it wants a specific text input coloured blue. The result will be a single blue input with the rest, grey.

The Computed tab is my favourite. It clearly displays the state of the html tag without the clutter of the Styles tab.

If we move over to the Computed tab, it simply shows us the properties that won their battles.

The first entry is the grey background we saw win earlier.

Hovering over any property will show a circular arrow. When this arrow is clicked, Chrome will return you to the Styles tab and focus on what we were looking at earlier.

Clicking the grey triangle extends the spoiler to show relevant information. In both the Computer and Styles tab, clicking style.css:222 will open the entire style.css file and show you the code at line 222.

Margin, Border, Position and Padding

Nobody knows his name, nor where he came from. But the CSS Square is the visual friend you never knew you needed.

The CSS Square, which is present on both Styles and Computed tabs, will show you how the different properties visually apply to your tags.

Margin is essentially white space.
This element has 150px of empty space to the left and 264px to the right. 1px is just a length and does not equal 1 pixel of your monitor.