You can access the Elements window in several ways, choose one that you are comfortable with:
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.
Download the HTML file
wellesley.html that you used in
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.,
is nested in
<li>'s are nested
<a> is nested in
Click on one of the elements, for example the
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
notice how below the rule for
a, the rules inhereted from its ancestors:
ul are shown.
However, you might be confused by styles such as
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
as shown in Figure 3.
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).
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:
displayand what kind of values does this property take?
displayproperty? (For such cases, look at the "Computed" tab as well.
h1in 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
px, both used in the styles? Refer to the "Computed" tab for some help.
navand 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
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.
lab2folder in the
cs110dlaccount has a second subfolder, titled
wellesleystyled. There you find the solution for the lab2 exercises.
To answer the following questions, you might need to compare several elements from the unstyled and styled document.
h1changed? Explain how this is possible.