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.

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 HTML (these are termed HTML documents). You may also come across documents written in other markup languages such as SVG or 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. Browsers like Firefox, Chrome, Safari, and Edge are designed to present documents visually, for example, on a computer screen, projector, mobile device, or printer. In a web context, this is generally referred to as rendering; we provided a simplified description of the process by which a web page is rendered in 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 color and 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.

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 selector. This selects the HTML elements that we are going to style. In this case, we are styling level one headings (<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.

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:

Now, our CSS, repeated from the previous section to style the H1 headline:

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.

Thank you!