Your first styles
In this lesson
- A rule
- Where does CSS go?
- Colours
- Styling the whole page
- Comments
- When nothing happens
Practise this in the Code Studio
open the exercise for this lesson. You type real code in your browser, see the result at once, and the tasks tick themselves when your code is right. Nothing to install.
HTML says what is on a page. CSS says how it looks: colours, sizes, spacing and layout. CSS stands for Cascading Style Sheets.
A rule
CSS is a list of rules. Every rule has the same shape:
h1 {
color: blue;
}| Part | Example | Meaning |
|---|---|---|
| Selector | h1 | Which elements to style |
| Property | color | What to change |
| Value | blue | What to change it to |
| Declaration | color: blue; | A property and its value together |
A rule can hold many declarations. Each one ends with a semicolon, and they all sit between curly braces.
h1 {
color: blue;
background-color: lightyellow;
}Note
CSS uses American spelling:
color, notcolour, andcenter, notcentre. A misspelt property is silently ignored.
Where does CSS go?
| Way | How | Use it |
|---|---|---|
| External file | A file called style.css, linked from the head: <link rel="stylesheet" href="style.css"> | Almost always. One file can style a whole website |
| Internal | Inside a <style> element in the head | For a single page |
| Inline | In a style attribute on one element | Rarely. Hard to maintain |
In the Code Studio, the style.css tab is your external file. It is already linked to the page.
Colours
There are three common ways to write a colour:
| Way | Example | Notes |
|---|---|---|
| Name | red, darkgreen, lightyellow | About 140 names. Easy to start with |
| Hex code | #1f74bf | Six digits: two each for red, green and blue. What designers use |
| RGB | rgb(31, 116, 191) | The same three amounts, from 0 to 255 |
#000000 is black, #ffffff is white, and #1f74bf is the GradesPal blue.
Two properties you will use on every page:
coloris the colour of the text.background-coloris the colour behind it.
Styling the whole page
body {
background-color: lightyellow;
}The body holds everything, so a background on the body covers the page.
Comments
/* This is a CSS comment */When nothing happens
CSS does not show error messages. If a rule seems to do nothing, check:
- Is the property spelt correctly?
- Is there a colon after the property and a semicolon at the end?
- Are both braces there?
- Does the selector match the element?
Try it
- Make the heading blue and the paragraphs dark green.
- Give the page a light background.
- Change the heading colour to the hex code
#e4572e. - Remove one semicolon and see what breaks. Put it back.
Check yourself
Name the three parts of this rule: p { color: red; }
p is the selector, color is the property and red is the value.
What is the difference between color and background-color?
color sets the colour of the text. background-color sets the colour behind it.
You wrote colour: blue; and nothing happened. Why?
CSS uses the American spelling color. A property the browser does not know is ignored without any error.
