In the Structuring content with HTML module, we covered what HTML is and how it is used to mark up documents. These documents will be readable in a web browser. Headings will look larger than regular text, paragraphs break onto a new line and have space between them. Links are colored and underlined to distinguish them from the rest of the text.

What you are seeing are the browser's default styles — very basic styling that the browser applies to HTML to make sure that the page will be basically readable even if no explicit styling is specified by the author of the page. These styles are defined in default CSS stylesheets contained within the browser — they have nothing to do with HTML.

The web would be a boring place if all websites looked like that. This is why you need to learn about CSS.

Using CSS, you can control exactly how HTML elements look in the browser, presenting your documents to your users with whatever design and layout you like.

• A document is usually a text file structured using a markup language, most commonly XML. Where previously we've talked about web pages, an HTML document contains the web page's content and specifies its structure.
• Presenting a document to a user means converting it into a form usable by your audience. Safari, and How browsers load websites.

CSS can be used for many purposes related to the look and feel of your web page. The most important are:

• Text styling, for example, for changing the size of headings and links.
• Creating layouts, for example, turning a single column of text into a multiple-column layout.
• Special effects such as animation.

The CSS language is organized into modules that contain related functionality. For example, take a look at the MDN reference pages for the Backgrounds and Borders module to find out what its purpose is and the properties and features it contains. In that module, you will also find a link to Specifications that defines the technology.

CSS is a rule-based language — you define rules by specifying groups of styles that should be applied to particular element or groups of elements on your web page.

For example, you might decide to style the main heading on your page as large red text. The following code shows a very simple CSS rule that would achieve this:

h1 {
  color: red;
  font-size: 2.5em;
}

• In the above example, the CSS rule opens with a <h1>).
• We then have a set of curly braces — { }.
• The braces contain one or more declarations, which take the form of property and value pairs. We specify the property (for example, color in the above example) before the colon, and we specify the value of the property after the colon (red is the value being set for the color property).
• This example contains two declarations, one for color and another for font-size.

Different CSS size units as a value.

A CSS stylesheet contains many such rules, written one after the other.

h1 {
  color: red;
  font-size: 2.5em;
}

p {
  color: aqua;
  padding: 5px;
  background: midnightblue;
}

You will find that you quickly learn some values, whereas others you will need to look up. The individual property pages on MDN give you a quick way to look up properties and their values.

As explained in How browsers load websites, when you navigate to a web page, the browser first receives the HTML document containing the web page content and converts it to a DOM tree.

After that, any CSS rules found in the web page (either inserted directly in the HTML, or in referenced external .css files) are sorted into different "buckets", based on the different elements they will be applied to (as specified by their selectors). The CSS rules are then applied to the DOM tree, resulting in a render tree, which is then painted to the browser window.

Let's look at an example. First of all, we'll define an HTML snippet that the CSS could be applied to:

<h1>CSS is great</h1>

<p>You can style text.</p>

<p>And create layouts and special effects.</p>

Now, our CSS, repeated from the previous section:

h1 {
  color: red;
  font-size: 2.5em;
}

p {
  color: aqua;
  padding: 5px;
  background: midnightblue;
}

This CSS:

• Selects all <h1> elements on the page, coloring their text red and making them bigger than their default size. Since there is only one <h1> in our example HTML, only that element will get the styling.
• Selects all <p> elements on the page, giving them a custom text and background color and some spacing around the text. There are two <p> elements in our example HTML, and they both get the styling.

When the CSS is applied to the HTML, the rendered output is as follows:

Now that you have some understanding of what CSS is and how it works, let's move on to giving you some practice with writing CSS yourself and explaining the syntax in more detail.

• Next