A CSS rule has three parts: the selector (which element), the property (what to change) and the value (how). The <span> tag wraps part of a text so you can style just that part.
span {
color: orange;
}RGB
A screen makes every colour from three lights: red, green and blue. Write rgb(R, G, B); each number goes from 0 (off) to 255 (full brightness).
| Colour | Value |
|---|---|
| Red | rgb(255, 0, 0) |
| Yellow | rgb(255, 255, 0) |
| Dark red | rgb(150, 0, 0) |
| White | rgb(255, 255, 255) |
| Black | rgb(0, 0, 0) |
Hex codes
The same RGB numbers written in base 16 after #: two characters per colour. ff means 255 and 00 means 0, so orange rgb(255, 140, 0) is #ff8c00.
span {
color: #ff8c00;
}Opacity
opacity goes from 1 (fully visible) to 0 (fully transparent). With :hover the style applies only while the mouse is over the element. Hover over the star:
.star:hover {
opacity: 0.3;
}Practice
Make the span text red using RGB.
span {
}Make the span dark red: red brightness 150 only.
span {
color: rgb(___, 0, 0);
}Make the span purple with the code #a260bf.
span {
}Make the star (class star) disappear completely on hover.
Give the h1 a background of #19195C and white text #ffffff.
h1 {
}Key points
rgb(R, G, B): each value from 0 to 255.- Hex code
#rrggbb:ff= 255 and00= 0. opacityfrom 1 (visible) to 0 (transparent);:hoverapplies on mouse-over.