CSS:Getting Started:How CSS works
From MDC
This page explains how CSS works in your browser.
You analyze your sample document, revealing the details of its style.
[edit] Information: How CSS works
When Mozilla displays a document, it must combine the document's content with its style information. So it processes the document in two stages:
- In the first stage, Mozilla converts the markup language and the CSS into a DOM (Document Object Model). The DOM represents the document in the computer's memory. It combines the document's content with its style.
- In the second stage, Mozilla displays the DOM.
A markup language uses tags to define the document's structure. A tag can be a container, with other tags between its start and end.
A DOM has a tree-like structure. Each tag 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.
Nodes that correspond to tags are also known as elements.
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> 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.
[edit] Action: Analyzing a DOM
To analyze a DOM, you need special software. Here, you use Mozilla's DOM Inspector (DOMi) to analyze a DOM.
Use your Mozilla browser to open your sample document.
From your browser's menu bar, choose Tools – DOM Inspector, or perhaps Tools – Web Development – DOM Inspector.
| If your Mozilla browser does not have DOMi, you can reinstall your browser making sure that you choose to install the web tools component. Then return to this tutorial.
If you do not want to install DOMi, 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 causes 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.
| 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. |
[edit] What next?
If you had difficulty understanding this page, or if you have other comments about it, please contribute to its Discussion page.
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: Cascading and inheritance