Tool to: View CSS & HTML code

Posted by on Jun 12, 2012 in Blog, Tutorials | No Comments

There are a couple of tools that allow you to break down a website into its HTML and CSS elements. Depending on what browser you use, some are more compatible than others. In this post I will talk about Google Chrome and in specific, the Developer Tools that come together with the browser.

Table of Content

Opening the Developer Tools

If you do not have Google Chrome and would like to follow along, click here and download the browser for free. If you have installed the web browser, open the development tools by going to View ? Developer ? Developer Tools.

Another way of opening the Developer Tools is to right-click on a part of the website and click “inspect element”

Viewing padding, margin and border

At first, it looks quite intimidating but don’t be scared, ill show you the basics so that you are able to look at a website’s HTML and CSS. First I want you to click on the magnifying glass in the bottom left side. What this allows you to do is to hover over an element in the Google Chrome browser and see the div box and its attributes.
  • Margin
  • Padding
  • Border
  • Inside Space

In this example i am editing the div with the Adsense class.

Live visual editing

A cool feature that you should take advantage of is the live visual editing capabilities. By changing the values, one can see the website update live. However once you refresh the webpage, the changes that you did with the Developer Tools will disappear. This aspect is really great for people who want to see how something looks before coding it in permanently. By changing the values in the bottom right window , you are able to see what small changes will do to the website instead of the hassle of editing and uploading a permanent change, just to realize that you wanted it 2px’s bigger…!

This is where you would click and edit the values. If you want to permanently make the change, it also shows where the line .Adsense class is located in the stylesheet (in this case, line 47 of my CSS file.

You can also edit the stylesheet to see what a change to a style would do to the entire website. First more to the “Resources” tab, which is located top right of the Developer Tool’s window. Here you are able to see everything that is grabbed so that the website can be seen. This includes things like images, typefaces, scripts, cookies and other assets.

1. find your stylesheet and find what you want to edit. 2. Just like how you would edit elements of a div, change a value. Here i change my base font-size to 24px. 3. See the change and tweak accordingly.

As a person who does not code websites for a living, I only have a basic understanding of HTML and CSS. I am glad for tools like Google Chrome’s Developer Tools that allow people like me to visually see how code affects a website without the extensive knowledge of CSS and HTML and I hope that more people take advantage of it! The aspects of the Developer Tools that i went over have been valuable assets for me while i edit my own websites. These tools have many other features and i certainly encourage exploring with them!

Leave a Reply