Now that you have a little understanding of some of the parts of the screen,
lets start with a very simple example.
A stylesheet to color the body of our page very light yellow and to
color an element labeled "orangelink" to be a reddish orange.
This is the HTML file it belongs to:
We see an ul-element "navbar", which has 4 li-elements with a link inside,
only the second link is supposed to be orange.
Opening it in a browser, this is what we get:
There is no color at all! So it is time to use DevTools. Put your mouse on the
page, about where the red arrow ends, and rightclick to get the context
menu. Choose "inspect". That gives us:
We immediately see there is an error in the console tab, it cannot load
a file. (see red arrow) Inspecting further we see it is looking for
"devtools-example01" and not for "devtools-example-01" So we made a
typing error in the link for the stylesheet in our HTML file. There is
a minus-sign (-) missing before "01".
We correct that and reload:
That′s better, we have a yellow background, but the second link is
still blue, only the dot in front of it is orange.
Hover your mouse in the elements pane of the Developer Tools window,
over the li as in the next
screenshot. And watch what happens on your actual webpage:
The li pointed to by your mouse in the elements-pane, is highlighted in
your actual webpage (it gets a blue-ish square over it) and it gets
a white label, telling what it is, and what its size is.
Move your mouse over elements in the elements pane and watch them being
highlighted in your webpage.
This is a great help on long webpages. If the element is out of focus,
the white label is positioned near the top or bottom of your page to
indicate it is further away on that page,
you know which direction you have to scroll your actual webpage to get
the correct element in focus to inspect it.
Now we want to know why the link is not orange, so we inspect as follows:
First: Look at the area I highlighted in yellow: This is not the script we
have inserted ourself, it is done by the browser to be able to do its job.
The left red arrow in the screenshot above, points to the li that is
selected in the elements pane.
In the styles pane we can see the color is ok.
When we select the "a-href" in the left pane, which is the link that
should be colored we see:
Indeed the color first was red, but it is overwritten (striked through) by the
user agent stylesheet, which gives the default colors for elements.
color: -webkit-link; which is
blue in this case. So the class "orangelink" should have been given to
the a-tag, not to the li-tag.
Now this was very obvious of course, but I only used it as an example of how to
You might have many stylesheets inside one HTML file, so how do you know
which stylesheet a definition comes from?
Well, the above screenshot shows you how: hover your mouse over the
stylesheet name (red arrow) and DevTools will give you name and url
of the stylesheet this definition comes from. (in the grayish box below
the name) It even gives the line number inside the stylesheet, this definition
came from. (line 5 in this case)