How CSS works

Go to Previous Section:
Why use CSS?This third section of the CSS Getting Started tutorial explains how CSS works in your browser and the purpose of the Document Object Model (DOM). You'll also learn how to analyze your sample document.

Information: How CSS works

When a browser displays a document, it must combine the document's content with its style information. It processes the document in two stages:

The browser converts the markup language and the CSS into the DOM (Document Object Model). The DOM represents the document in the computer's memory. It combines the document's content with its style.
The browser displays the contents of the DOM.

A markup language uses elements to define the document's structure. You mark an element using tags, which are strings beginning with '<' and ending with '>'. Most elements have paired tags, a start tag and an end tag. For the start tag, place the element name between '<' and '>'. For the end tag, place a '/' after the '<' and before the element name.

Depending on the markup language, some elements have only a start tag, or a single tag where the '/' comes after the element name. An element can also be a container and include other elements between its start tag and end tag. Just remember to always close the tags inside the container.

A DOM has a tree-like structure. Each element, attribute and run of text in the markup language becomes a node in the tree structure. The nodes are defined by their relationship to other DOM nodes. Some elements are parents of child nodes, and child nodes have siblings.

Understanding the DOM helps you design, debug and maintain your CSS, because the DOM is where your CSS and the document's content meet up.

Example

In your sample document, the <p> tag and its end tag </p> create a container:

<p>
  <strong>C</strong>ascading
  <strong>S</strong>tyle
  <strong>S</strong>heets
</p>

Live Example

In the DOM, the corresponding P node is a parent. Its children are the STRONG nodes and the text nodes. The STRONG nodes are themselves parents, with text nodes as their children:

P
├─STRONG
│ └─"C"
├─"ascading"
├─STRONG
│ └─"S"
├─"tyle"
├─STRONG
│ └─"S"
└─"heets"

Action: Analyzing a DOM

Using DOM Inspector

To analyze a DOM, you need special software. You can use Mozilla's DOM Inspector (DOMi) add-on to analyze a DOM. You simply need to install the add-on (see More details below).

Use your Mozilla browser to open your sample HTML document.
From your browser's menu bar, choose Tools > DOM Inspector, or Tools > Web Development > DOM Inspector.

More details

If your Mozilla browser does not have DOMi, you can install it from the Add-ons site and restart the browser. Then return to this tutorial.

If you do not want to install DOMi (or you're using a non-Mozilla browser), you can use Web X-Ray Goggles, as described in the next section. Or you can skip this section and go straight to the next page. Skipping this section does not interfere with the rest of the tutorial.
In DOMi, expand your document's nodes by clicking on their arrows.
Note: Spacing in your HTML file may cause DOMi to show some empty text nodes, which you can ignore.

Part of the result might look like this, depending on which nodes you have expanded:
```
│ ▼╴P
│ │ │ ▼╴STRONG
│ │ └#text
│ ├╴#text
│ ►╴STRONG
│ │
```
When you select any node, you can use DOMi's right-hand pane to find out more about it. For example, when you select a text node, DOMi shows you the text in the right-hand pane.

When you select an element node, DOMi analyzes it and provides a huge amount of information in its right-hand pane. Style information is just part of the information it provides.

Challenge

In DOMi, click on a STRONG node.

Use DOMi's right-hand pane to find out where the node's color is set to red, and where its appearance is made bolder than normal text.

Possible solution

In the menu above the right-hand pane, choose CSS Rules. You see two items listed, one that references an internal resource and one that references your stylesheet file. The internal resource defines the font-weight property as bolder; your stylesheet defines the color property as red.

Hide solution

See a solution for the challenge.

Using Web X-Ray Goggles

Web X-Ray Goggles shows less information than DOM Inspector, but is simpler to install and use.

Go to the home page for Web X-Ray Goggles.
Drag the bookmarklet link in that page to your browser toolbar.
Open your sample HTML document.
Activate Web X-Ray Goggles by clicking the bookmarklet on the toolbar.
Move your mouse pointer around over your document to see the elements in the document.

What next?

Go to Next Section:
Cascading & InheritanceIf you took the challenge, you saw that style information from more than one place interacts to create the final style for an element. The next page explains more about these interactions.