Introduction to CSS

Welcome to the CSS course! In the HTML course, you built web pages and learned that HTML describes what is on a page: headings, paragraphs, lists or images. How the page looks is the job of another language: CSS. With CSS, you choose colors and fonts, add backgrounds and borders, set the space between elements and arrange them on the page, for example into columns.

CSS stands for Cascading Style Sheets:

• A style sheet is a list of rules that describe how a document should look, for example: “all level-two headings are brown”. That’s why a file with CSS code is called a stylesheet.
• Cascading refers to how CSS decides which rule wins when several rules style the same element, for example when one rule says that a heading should be brown and another one says it should be blue. This decision process is called the cascade, and you’ll get to know it in the next lesson, on selectors.

Look at the editor on the right. The file index.html contains the page about cats that you know from the HTML course. In the preview, it is just black text on a white background, because the page has no styles yet. In the second file, style.css, we’ve prepared a stylesheet for it. Don’t worry that you don’t understand it yet: by the end of the course, you’ll be able to write one like it yourself.

For the browser to use the stylesheet, the page has to link to it. This is done by the link element in the head of the page, the head element:

<link rel="stylesheet" href="style.css">

The rel attribute (short for relationship) says that the linked file is a stylesheet, and the href attribute says which file it is. Like meta, the link element has no closing tag. We’ll look at it more closely at the end of this lesson.