How CSS works

This is the third section of the CSS Getting Started tutorial; it explains how CSS works in your browser. You analyze your sample document, revealing the details of its style.

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:

  1. The browser converts the markup language and the CSS into a structure called the DOM (Document Object Model). The DOM represents the document in the computer's memory. It combines the document's content with its style.
  2. 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 '>'. An element can have a start tag, which is just the name of the element, inside '< >', and an end tag, which has the element name with a '/' after the '<'. Depending on the markup language, some elements have only a start tag, or only a tag where the '/' comes after the name.

An element can be a container, with other elements between its start tag and end tag.

A DOM has a tree-like structure. Each element and run of text in the markup language becomes a node in the tree structure. DOM nodes are not containers. Instead, they can be parents of child nodes.

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

http://jsfiddle.net/djaniketster/6jbpS/

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"

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

Action: Analyzing a DOM

Using DOM Inspector

To analyze a DOM, you need special software. Here, you use Mozilla's DOM Inspector (DOMi) add-on to analyze a DOM. You need to install the add-on in order to do this activity.

  1. Use your Mozilla browser to open your sample HTML document.
  2. From your browser's menu bar, choose Tools > DOM Inspector, or perhaps 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.

  3. 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.

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

What next?

If 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.

Document Tags and Contributors

Last updated by: Jeremie,