One of the best ways to quickly create great looking websites is to look at other sites that you like and see how they use CSS to style their sites. This can provide inspiration for your own website design, and help you to achieve the look and feel that you are going for.
Luckily, it is actually very easy to deconstruct any website you see on the web. My favorite web browser Chrome, provides an awesome set of developer tools that makes this simple. Other web browsers like Firefox provide similar sets of tools, although the interface is a little different for each.
In this tutorial, I am going to show you how you can use the Chrome Developer Tools to quickly deconstruct any website you are looking at. Keep in mind that you will need a basic understanding of CSS and HTML so you can take advantage of the information that it provides.
What are the Chrome Developer Tools?
On the flip-side, all the functionality that developer tools provide can make it quite intimidating for the non-developer.
To keep things from being overwhelming, I am just going to focus on a couple of just a couple of features that let us inspect the html of any website and find specific properties we are looking for.
Selecting an element on the site
I will be using SlickWP as the model for this tutorial, so you can easily follow along as you are reading. And of course you will need to be using Chrome as your web browser.
Lets say you want to discover the font, font-color, and font-size I am using for my post headlines. The first thing you need to learn is how to select an element on the page.
To start, find the post headline and right click it. The headline should get highlighted in blue and a menu will popup. Then use your mouse to select the Inspect Element menu option.
You will notice that a new pane opens in your web browser. This new pane itself is split into 2 parts. At the top, notice that you are in the Elements tab and it displays the html of the page you are on. The html that corresponds to the element you are selected is also highlighted.
This pane is completely interactive, so you can actually select different html elements from this pane and it will automatically highlight the corresponding element on the web page itself. This makes it simple to see how each HTML element is laid out your website.
Examining element properties
The power of selecting an HTML element is that you can now see all the CSS properties for that element. Since my post headline is selected, lets find out what what CSS properties I have used to style it.
Look at the bottom of the Inspector pane. It is also split up into 2 parts, with left and right sections. On the right hand side you should see a set embedded boxes. Ignore this for now, and scroll down till you see the CSS properties like the screenshot below.
From here you can see the font-family (Oswald) I’m using, font-color (#333), font-size (28px) and basically every other CSS style that has been applied to my font-headline.
It takes a little bit of practice but play around with selecting elements from the Inspector window and you will quickly get used to how this works.
Finding out layout widths
Often times when deconstructing a website, you will want to find out the widths of different content areas on the site. For example, the width of a site’s post content, or the width of the sidebar. The Chrome inspector window can help with this too.
Lets find out the layout width of SlickWP’s post content area.
You will find it a bit harder to directly select a content area since they are usually invisible on the page. However, just right-click anywhere in the post content and select Inspect Element again. This is where a bit of HTML knowledge is helpful because then you can look at the html source code and directly select the most obvious content box.
If you are not sure, then take a more trial and error approach and keep selecting each parent html element and watching what gets highlighted on the webpage. When the content area you want gets highlighted, then you have selected the right html element.
For SlickWP, the post content is actually the article element.
Once you have the right content box selected, notice the tooltip next to the highlighted blue box. It shows you the width and height of the selected area. The first number is the width, so for this site, the post content width is 675 pixels.
Again, play around with selecting different elements on a site to see the various dimensions of each page element.
As you can see, the Chrome Developer Tools is a very handy weapon for your toolbox. I have only touched on a small part of what it can do, but with what I showed you, you can pretty much deconstruct any website you see online. I recommend that you get familiar with it as much as you can, as it will make designing websites much, much easier.