• Overview: CSS styling basics
• Next

CSS (Cascading Style Sheets) allows you to create great-looking web pages, but how does it work under the hood? This article explains what CSS is, what the basic syntax looks like, and how your browser applies CSS to HTML to style it.

Browser default styles

In theStructuring 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 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.

What is CSS for?

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.

• Adocument is usually a text file structured using a markup language, most commonlyHTML (these are termedHTML documents). You may also come across documents written in other markup languages such asSVG orXML. An HTML document contains a 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 likeFirefox,Chrome,Safari, andEdge 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 asrendering; we provided a simplified description of the process by which a web page is rendered inHow browsers load websites.

CSS can be used for many purposes related to the look and feel of your web page, for example:

• Text styling, including changing thecolor andsize of headings and links.
• Creating layouts, such asgrid layouts ormultiple-column layouts.
• Special effects such asanimation.

The CSS language is organized intomodules that contain related functionality. For example, take a look at the MDN reference pages for theBackgrounds and Borders module to find out what its purpose is and the properties and features it contains. In our module pages, you will also find links toSpecifications that define the technologies.

CSS syntax basics

CSS is a rule-based language — you define rules by specifying groups of styles that should be applied to a 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 aselector. Thisselects the HTML elements that we are going to style. In this case, we are styling level one headings (<h1>).
• We then include a set of curly braces —{ }.
• The braces contain one or moredeclarations, which take the form ofproperty andvalue 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 thecolor property).
• This example contains two declarations, one forcolor and another forfont-size.

Different CSSproperties have different allowable values. In our example, we have thecolor property, which can take variouscolor values. We also have thefont-size property. This property can take varioussize 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.

How is CSS applied to HTML?

As explained inHow 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 aDOM 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 arender 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:

Play with some CSS

Try playing with the above example. To do so, press the "Play" button in the top-right corner to load it in our MDN Playground editor.

Do the following:

1. Add another paragraph of text below the two existing ones, and note how the second CSS rule is automatically applied to the new paragraph.
2. Add an<h2> subheading somewhere below the<h1>, maybe after one of the paragraphs.
3. Try giving the<h2> elements a different color by adding a new rule to the CSS. Make a copy of theh1 rule, change the selector toh2, and change thecolor value fromred topurple, for example.
4. If you are feeling adventurous, try looking up some new CSS properties and values in the MDNCSS reference to add to your rules!

For some additional practice with CSS basics, seeWrite your first lines of CSS! from Scrimba^{MDN learning partner}. This scrim gives a useful rundown of basic CSS syntax, and provides an interactive challenge where you can get some more practice with writing CSS declarations.

Summary

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.

• Overview: CSS styling basics
• Next