Chrome's Inspect Element   Understanding CSS like the browser

Why choosing Chrome?

The default browser we will use in this course is Chrome. This means that all your assignments should first work well on Chrome and only if you desire, you can make changes to make things look the same on the other browsers. For your project, once you have everything working on Chrome, you might consider adjusting the CSS rules to fix problems on the other browsers such as Firefox and Internet Explorer.
The reason for choosing Chrome is that according to W3School's browser use statistics, Chrome is currently the most used browser on the Web. Statistics from the Wikipedia article are a bit different from those of W3Schools, but both agree on the dominance of Chrome. In previous years our choice has been Firefox, but since its usage share has fallen dramatically, we are switching to Chrome.

Developer Tools

All browsers have tools to help developers understand how their HTML, CSS, and Javasript code is being interpreted by the browser. In these notes you will become familiar with Chrome's developer tools, most importantly the Inspect Element window. In the future, we will also talk about how to use the Console to debug Javascript applications.

You can access the Elements window in several ways, choose one that you are comfortable with:

  • Using the mouse (or trackpad): right-click and choose Inspect Element on the drop-down menu.
  • Using the menu of Chrome: View | Developer | Developer Tools
  • Using the keyboard: In Mac: Cmd + Opt + I; In Windows: Ctrl + Shift + I
A new window will open at the bottom of your current web page. This window is usually docked in this position, but you can use the docking icon dock icon to dock/undock it from the main window. Figure 1 shows the complete screenshot of a web page and the dev tools at the bottom.

screenshot of chrome inspect element
Figure 1: Screenshot of a page and the Inspect Element window.

The Elements window and the Web page

The first thing to notice in the Elements window is that it is divided in two panes, on the left side we see a tree-representation of the nested structure of the HTML document (similar to that of folder and files in programs such as Finder (Mac) or Windows Explorer). On the right side there is a series of tabs, opened on Styles, showing what styles are applied to the selected element and how the browser has calculated the box that contains the element.

By selecting an element in the tree representation and hovering the mouse over it, one can see how the corresponding area in the Web page is highlighted in blue, also showing a little yellow box with the width x height dimensions of the element's content box. In Figure 1, we notice in the upper part that the whole document is highlighted, because we have selected the <html> element (in the Elements window).

Spend a few minutes navigating the document tree and highlighting different tags, to see the corresponding box on the Web page.

Your Exploration Task

Download the HTML file wellesley.html that you used in Lab 2 and open it with your browser. This should be the file that doesn't link to the stylesheet you generated in Lab. Open the Inspect Element window and start exploring the document tree. Notice how elements are nested in each other, e.g., <ul> is nested in <nav>, <li>'s are nested in <ul>, <a> is nested in <li>, etc.

Click on one of the elements, for example the <a> tag for Hillary Clinton and then inspect what you see in the Styles pane. Because you haven't specified your own style for the page, the listed styles are the ones provided by the browser (the user agent). Figure 2 shows the default style for <a>. For the moment, don't worry about the complicated name of the selector (a:-webkit-any-link), simply think that it is the style for a. Also, notice how below the rule for a, the rules inhereted from its ancestors: li and ul are shown.

screenshot default styles for selector a
Figure 2: Default styles provided by the browser for a.

However, you might be confused by styles such as color: -webkit-link, because the value it's not a kind of color. The reason for this is that the browser keeps a table where every value such as -webkit-link is mapped to a real value. You can see the results of this mapping in the Computed tab, as shown in Figure 3.

screenshot computed styles for selector a
Figure 3: Computed styles for the selector a.

Notice how now the color property has a real value now (don't worry if you don't understand the rgb(85,26,139) value for the moment, it's a way to represent colors with numbers, which we will discuss very soon).

Things to try on your own

For the wellesley.html document (without CSS styling), explore the default styles for each element and look at what properties and values these styles have.

Here are some questions to ask yourself and figure out during the exploration:

  • Which elements have the property display and what kind of values does this property take?
  • What can you say about the elements that don't have a display property? (For such cases, look at the "Computed" tab as well.
  • Select the element h1 in the document tree, then hover with the mouse over the colored box (it has the words: margin, border, padding). What do you see in the web page as you perform this hovering? Repeat the same for the element ul.
  • Do you understand what the numbers in the box mean?
  • Resize your browser page, then click on the button reload browser button reload. Which numbers in the box changed?
  • Can you figure out the relation between the unit em and px, both used in the styles? Refer to the "Computed" tab for some help.
  • Select the element nav and then the element footer. What can you say about the selector or the rule?

Now that you have explored the default styles provided by the browser, you can move on to explore what happens when you add your own stylesheet. For this, download your own lab2 folder that you worked on the Lab. You should have a version of wellesley.html that is linked to a style.css file on which you worked on the lab.

If you didn't have time to upload on your account the work you did during lab, the lab2 folder in the cs110dl account has a second subfolder, titled wellesleystyled. There you find the solution for the lab2 exercises.

In a new browser window open this second HTML file and open "Inspect Element". Try to compare how the "Styles" pane looks for elements you have styled. For an example, see in Figure 4 the before-and-after comparison for the h1 element.

screenshot of defaults styles for h1 screenshot of user-defined styles for h1
Figure 4: Default styling for h1 (left) and user-defined styles (right).

More Questions

To answer the following questions, you might need to compare several elements from the unstyled and styled document.

  1. Has the box size for h1 changed? Explain how this is possible.
  2. Can you come up with the formula that calculates the entire box size that each element occupies in the page?
  3. Which are all the different ways that you can influence this box size through the stylesheet?