What Is CSS?

Introduction

HTML gives a page its structure, but on its own it looks plain: black text on a white background. CSS is what makes it beautiful. If HTML is the skeleton, CSS is the clothes, colours and hairstyle.

The simple explanation

CSS tells the browser how to display HTML elements.

CSS stands for Cascading Style Sheets. You write rules such as "make all headings blue", and the browser applies them to the page.

Your first rule

A CSS rule has two parts: a selector that says what to style, and a declaration block in curly braces that says how.

Press Run. Here:

• h1 is the selector: it picks every h1 element.
• color is a property. royalblue is its value.
• Each declaration is property: value; and ends with a semicolon.

Three ways to add CSS

1. Inline: in a style attribute on one element. Quick, but hard to maintain.
2. Internal: in a style element, like above.
3. External: in a separate .css file linked from the head. This is how real sites do it.

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

An external file can be shared by every page of your site, so one change updates everything.

Comments

You can leave notes in CSS. The browser ignores them.

/* This makes headings blue */
h1 { color: blue; }

Try it yourself

Change the colour of the headings to tomato, make the paragraphs 18px, and then add a rule that gives the h2 a different colour of your choice.

Summary

• CSS styles HTML. A rule is a selector plus declarations.
• A declaration is property: value;.
• You can add CSS inline, internally or from an external file. External is best.