Last day we used HTML to build the structure and content of a web page. Quick recap: what does an HTML tag like a paragraph tag actually do?

Today we move on to CSS — the language that styles that content, changing colours, sizes and layout. We'll build an Introduction to CSS page step by step at our devices: predict first, then build, run, and fix.

Before anyone runs anything, look at what we are about to build. Commit to a prediction: when this CSS runs, what will change on the page? Which text do you think will change colour or size first?

Hold your prediction — we'll come back to it later to see who was right.

We have already learned about HTML, which is a coding language to create the structure and content of web pages.

CSS stands for Cascading Style Sheets and is a programming language for styling the content of web pages. CSS applies styles to HTML elements and can change how they look on the web page.

For example we could use the following CSS code to define how all paragraphs on a website appear:

p{
    color: red;
    line-height: 20px;
    margin-bottom: 10px;
}

So anywhere we use a <p></p> tag in the HTML code, the text will:

1. appear red.
2. have a line height of 20 pixels.
3. have a bottom margin of 10 pixels.

We call the CSS that we write rules. We can write a CSS rule for paragraphs of text, for images, for tables etc. A CSS rule has a selector and a declaration block.

The selector is the HTML element you want to create the rule for and the declaration block has the style rules for that HTML element.

h2{
    color: green;
    font-size: 18px;
    text-align: center;
}

In the above CSS code the selector is the h2 element and there are 3 rules specified in the declaration block. These rules are contained inside curly braces {} and each rule has the CSS property name (e.g. color) and the value that should be applied (e.g. green). The property and the value is separated with a semicolon :

Take a look at the below HTML and CSS code and notice how it creates a CSS rule for the h2 element and that the rule gets applied to each of the <h2></h2> tags.

As mentioned above, the CSS selector is the HTML element that you want to create the rule for. There are different ways that we can select which HTML elements to apply the rule to.

Element Selector
As in the above examples we can select a HTML element to apply the rule to.

p{
    color: blue;
}