Web · Introduction to CSS
CSS Colors
The full text of this chapter, to read or revisit. To practise, do the exercises.
▶ Do the exercisesExercise 1 — Introduction to CSS Colors
Colors are a fundamental part of CSS styling. They allow you to control how your HTML elements look. There are two main properties for applying colors:
-
color
- Sets the color of the text content
-
background-color
- Sets the background color of an element
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
background-color: yellow;
}
p {
color: green;
background-color: lightgray;
}
</style>
</head>
<body>
<h1>Codémon Types</h1>
<p>Learn about water, fire, and plant type Codémons!</p>
</body>
</html>
In the example above:
- The heading text is blue with a yellow background
- The paragraph text is green with a light gray background
Exercise 2 — Named Colors in CSS
CSS provides a set of named colors that you can use without having to remember color codes. These are words like
red
,
blue
,
green
,
yellow
, etc.
Named colors are easy to use and remember, but they are limited in variety. CSS supports about 140 named colors.
<!DOCTYPE html>
<html>
<body style="background-color: lightblue;">
<h1>Types</h1>
<p style="color: blue;">Water</p>
<p style="color: red;">Fire</p>
<p style="color: green;">Plant</p>
<p style="color: yellow;">Electric</p>
<p style="color: brown;">Rock</p>
</body>
</html>
Common Named Colors
Here are some commonly used named colors in CSS:
- Basic: black, white, red, green, blue
- Light shades: lightblue, lightgreen, pink, lightgray
- Dark shades: darkblue, darkgreen, darkred, darkgray
- Others: orange, purple, yellow, brown, cyan, magenta
Exercise 3 — Choosing the Right Color Property
Which CSS property would you use to change the color of text inside a paragraph?
Options
• ```color: blue;```
• ```background-color: blue;```
• ```text-color: blue;```
• ```font-color: blue;```
Hint : Think about which property specifically targets the color of the text content versus the background of the element.
Exercise 4 — Hexadecimal Color Values
While named colors are convenient, they're limited. For more precise colors, you can use hexadecimal color values.
Hexadecimal colors start with a # symbol followed by 6 characters (0-9 and A-F), representing the amount of red, green, and blue:
#RRGGBB
- RGB order - Red, Green, Blue
- RR: Red (00-FF)
- GG: Green (00-FF)
- BB: Blue (00-FF)
<!DOCTYPE html>
<html>
<body style="background-color: ivory;">
<p style="color: #0000FF;">Water</p>
<p style="color: #00FF00;">Plant</p>
<p style="color: #FFD700;">Special</p>
</body>
</html>
How Hexadecimal Colors Work
Hexadecimal values are a bit tricky to understand. 00 means no color, FF means full intensity. So:
- #FF0000 is pure red
- #00FF00 is pure green
- #0000FF is pure blue
- #FFFFFF is white (all colors at full intensity)
- #000000 is black (no color)
With hexadecimal, you can create millions of colors by mixing different intensities of red, green, and blue.
Exercise 5 — Match Hex Colors with Their Names
Match each hexadecimal color code with its corresponding color name:
Items to match
• #FF0000
• #00FF00
• #0000FF
• #FFFF00
Definitions
• Red
• Green
• Blue
• Yellow
Exercise 6 — RGB and RGBA Color Values
Another way to specify colors in CSS is using RGB (Red, Green, Blue) or RGBA (Red, Green, Blue, Alpha) functions:
-
rgb(red, green, blue)
- Each value is between 0 and 255
-
rgba(red, green, blue, alpha)
- Same as RGB but with an alpha (transparency) value between 0.0 (fully transparent) and 1.0 (fully opaque)
<!DOCTYPE html>
<html>
<body style="background-color: lightpink">
<h1 style="color: rgb(255, 0, 0)";>Codémon Types</h1>
<p style="background-color: rgb(255, 165, 0);">Fire</p>
<p style="background-color: rgba(0, 0, 255, 0.5);">Water</p>
<p style="background-color: rgba(0, 128, 0, 0.7);">Plant</p>
</body>
</html>
RGB Color Model
The RGB color model works by mixing red, green, and blue light:
- rgb(255, 0, 0) is pure red
- rgb(0, 255, 0) is pure green
- rgb(0, 0, 255) is pure blue
- rgb(255, 255, 255) is white
- rgb(0, 0, 0) is black
- rgb(255, 255, 0) is yellow (red + green)
Exercise 7 — Complete the RGB Color Values
Complete the CSS code by filling in the correct RGB values to create a red color with 70% opacity.
<p style="color: rgba(____,____,____,____);">This text should be red</p>
Options: 255 255 255 0 0 0 70 0.7 125 0.5
Hint : Remember that in RGB, each value goes from 0 (none of that color) to 255 (maximum of that color). For RBGA, the alpha value goes from 0.0 (fully transparent) to 1.0 (fully opaque).
Exercise 8 — Understanding RGBA Transparency
Which of the following RGBA values would create a semi-transparent red color?
Options
• ```rgba(255, 0, 0, 0.5)```
• ```rgba(255, 0, 0, 0)```
• ```rgba(255, 0, 0, 1)```
• ```rgba(0, 0, 255, 0.5)```
Hint : Think about what the alpha value represents in RGBA. A value of 0 means fully transparent, 1 means fully opaque, and values in between create semi-transparency.
Exercise 9 — Text and Background Color Combinations
When choosing colors for text and backgrounds, it's important to ensure good contrast for readability. High contrast makes text easier to read than low contrast combinations.
<!DOCTYPE html>
<html>
<body>
<p style="color: rgb(255, 255, 255); background-color: #333333;">This text has good contrast (white text on dark background)</p>
<p style="color: yellow; background-color: #FFFF99;">This text has poor contrast (yellow text on light yellow background)</p>
<p style="color: rgb(0, 0, 100); background-color: white;">This text has good contrast (dark blue text on white background)</p>
</body>
</html>
Which method of setting colors to use?
As you can see, we can use whatever method we want to set the color of the text and background. Named, hexadecimal, RGB, and RGBA values all work.
There are also other methods that we haven't talked about here.
The most important thing you have to remember is that it's better to stay with the same method throughout your code to keep it consistent and easier to read.
Exercise 10 — Color Formats and Their Examples
Match each color format with its correct example:
Items to match
• Named color
• Hexadecimal color
• RGB color
• RGBA color
Definitions
• blue
• #FF5500
• rgb(255, 0, 0)
• rgba(0, 128, 255, 0.5)