CSS: Foundation — Developer Tools

CSS Developer Tools

Learning outcomes:

  • Inspecting element styles in Developer Tools
  • Adding, removing, and modifying given styles
  • Viewing computed styles

Introduction

As a CSS developer, an exceptionally important area for you to learn — in fact, master — is the Developer Tools offered to developers by browsers.

In this chapter, we shall explore Developer Tools in relation to CSS.

In particular, we'll learn how to inspect the styles of any HTML element on a webpage; how to modify the styles and see the results right as we type the CSS code; how to view the computed values of given keyword values; and much more.

Inspecting element styles

Consider the following HTML document:

HTML
<html>
<head>
   <title>Learning CSS</title>
   <style>
      h1 {
         background-color: blueviolet;
         color: white;
      }

      p {
         color: red;
      }
   </style>
</head>
<body>
   <h1>A heading</h1>
   <p>This is a paragraph</p>
</body>
</html>

It's a basic document with a couple of elements and, most importantly, a style sheet.

Live Example

Let's see the output produced.

A heading

This is a paragraph

Quite straightforward.

Now, in this case, we wrote the style sheet ourselves (in fact, the entire HTML document ourselves) and, likewise, know about the exact styles being applied to each and every element.

But what if we didn't write the style sheet?

How could we inspect the styles of given elements in such a case? How could we see which properties are being applied to which elements?

Well, this is where the Developer Tools offered by the browser come in handy.

Open up the example document that we saw above and right-click on the heading (the <h1> element) and then click Inspect.

Here's an illustration for the Firefox browser:

The 'Inspect' option in the right-click menu in Firefox
The Inspect option in the right-click menu in Firefox
The right-click menu on most browsers have an option that reads 'Inspect element' or 'Inspect,' meant to inspect an element.

This launches the inspection window, part of the Developer Tools, where we are shown the element in the HTML document's structure and also shown its styles:

Inspecting an element in the Elements tab in Firefox
Inspecting an element in the Elements tab in Firefox

Now, devote all your attention and focus to the panel on the right-hand side — this is where all the CSS magic happens.

Different browsers obviously have different interfaces for this but in general we have the following features here:

  • Add/remove/update given style declarations.
  • Toggle on/off given states, for example the :hover state (we'll cover these states later on in the coming chapters).
  • View the final, computed values of given properties (we'll see more about this later in this chapter).

...and a lot more.

Let's come back to our <h1> element and see its styles as shown in the Inspector (in Firefox):

The styles of our h1 element displayed
The styles of our <h1> element displayed

We have background-color: blueviolet and color: white, just as we defined inside the <style> element.

Interesting. But let's make it more interesting by adding some more styles and changing these existing ones in the next section.

Experimenting with styles

In order to add a new declaration to a given declaration block, we simply need to click anywhere after a given declaration. We can even simply click next to the ending } symbol to create a new declaration.

Let's take an example to help clarify this. Suppose we wish to add a 20px of padding to the <h1> element.

We click right next to the ending } of the declaration block. This initiates the creation of a new declaration whose property must be first entered:

Creating a new style
Creating a new style

Go on, type in 'padding' and then press the Enter key. This shifts focus to the value of the property which must be entered too. Enter '20px' here and then press Enter again.

The padding style created
The padding style created

Voila! This completes the declaration and we get our desired padding style applied.

A heading

This is a paragraph

Changing an existing property's value is easier. We just have to click on the value and it becomes editable; thereafter, we can type in the new value.

Let's change the background color from blueviolet to blue:

Changing the value of background-color
Changing the value of background-color

Notice the autocompletion dropdown as we type a color name. This can be really helpful in order to visualize different colors as we navigate through them. Developer Tools is not a tool — it's an asset!

After entering the value blue, press Enter and notice the heading's background color change:

A heading

This is a paragraph

So far, so good.

Now, as the final step, let's also see how to remove a style declaration.

To remove a declaration, we just have to toggle the checkbox right at its start. It's kind of like commenting out the declaration (in that it's still there if we want to reinstate it).

Having said this, let's remove the padding style we just applied:

Removing the padding declaration
Removing the padding declaration
A heading

This is a paragraph

And there we have our tightly packed heading back again (doesn't look nice by the way).

Viewing computed styles

Another handy thing that we could do in the Developer Tools is to view the computed styles of an element.

So what are computed styles?

Well, they are just as they sound.

Recall the x-large keyword that we saw in the previous chapter for the font-size property. We stated in the chapter x-large, and all other keywords for the font-size property, itself resolves down to an actual length value, in units of CSS pixels.

In this case, x-large resolves down the length value 24px. This is the computed value of the font-size property.

Whatever concrete value a particular property resolves down to is referred to as its computed value.

All the computed property-value pairs of an element are collectively referred to as its computed styles.

As simple as that.

The computed values of different properties differ from property to property.

For example, for properties related to colors, the computed value resolve down to an rgb() function describing the color's RGB code.

We'll learn more about RGB colors and the rgb() function in the CSS Colors unit.

In order to view the computed styles of an element, open up the Computed tab (it's more or less named the same across different browsers).

Here's what it displays for our <h1> element:

Computed styles for the h1 element
Computed styles for the <h1> element

The keyword blue boils down to rgb(0, 0, 255). Similarly, white boils down to rgb(255, 255, 255).

These values are what the browser needs to be able to paint pixels on the screen. It just can't make any sense out of words like blue or white; rather, it can only understand values reduced down to their canonical forms.

A quick primer on RGB colors

A display screen is comprised of a sequence of light-emitting units referred to as pixels. Pixels are what bring computer screens to life by painting all different sorts of graphics in millions of hues (colors).

Each pixel is made up of three sub-units:

  • A red light
  • A green light
  • A blue light

This composition is where RGB gets its name from. That is, RGB stands for Red, Green, Blue, signifying the very fundamental composition of each and every device pixel.

These three different units can be lit at a given level of brightness. This brightness is represented as an integer in the range 0 - 255 in computers. 255 means full brightness whereas 0 means completely dark (i.e turned off).

For a pure red color, we want the first channel (red) to be completely lit while the other two ones (green and blue) to be off. Likewise, the complete code we get is rgb(255, 0, 0).

Similarly, for a pure blue color, we want the first and second channels (red and green) to be off while the last one (blue) to be completely lit. This gives us... you guessed it... rgb(0, 0, 255).

Wait a minute...

rgb(0, 0, 255) is exactly what the computed value is for background-color above. Now you know where this value is coming from.

When all channels are lit to full brightness, we get white. When all are off, we get complete darkness, which is the color... yes that's right... black.

Spread the word

Think that the content was awesome? Share it with your friends!

Join the community

Can't understand something related to the content? Get help from the community.

Open Discord

 Go to home Explore more courses