Colors and Backgrounds
CSS gives you three ways to write colours and two main properties to apply them. Let's go through the most useful ones.
Text color — color
Changes the colour of the text inside an element:
h1 {
color: darkblue;
}
p {
color: #333333;
}
Background color — background-color
Sets the background colour behind an element:
body {
background-color: #f5f5f5;
}
.card {
background-color: white;
}
Three ways to write a colour
Named colours
CSS has around 140 built-in names. Simple to read and write:
color: red;
color: indigo;
color: tomato;
color: slategray;
color: lightblue;
Good for quick experiments. Limited for real design work.
Hex codes
The most common way to write colours. A # followed by six characters (digits 0–9 and letters a–f):
color: #ff0000; /* red */
color: #4051b5; /* indigo */
color: #333333; /* dark grey */
color: #ffffff; /* white */
color: #000000; /* black */
Every colour visible on a screen has a hex code. To find one: search "color picker" in Google — a colour picker appears right in the browser results. Pick any colour, copy the hex code.
RGB
Defines colours as a mix of red, green, and blue — each from 0 to 255:
color: rgb(64, 81, 181); /* indigo */
color: rgb(255, 255, 255); /* white */
color: rgb(0, 0, 0); /* black */
color: rgb(255, 99, 71); /* tomato */
A practical example — dark theme in four rules
body {
background-color: #1a1a2e;
color: #e0e0e0;
}
h1 {
color: #4051b5;
}
h2 {
color: #a0a8d0;
}
Dark background, light text, coloured headings. That is the entire look.
Challenge
Search "color picker" in Google. Pick three colours you like and copy their hex codes.
Apply them in style.css:
- One as the body background
- One as the text colour for your headings
- One as the background of a class you add to one section of your page
Play with it until the combination actually looks good to you. Colour is one of the fastest ways to make a page feel intentional.