After learning how to select HTML elements, it is time for us to talk about what you can do with them.
To get started, let's discuss how to change their colors. As we've seen previously, after you've selected a <p>
element, you can change the text color by specifying a color
property.
1p {
2 color: red;
3}
Or change the element's background color using the background-color
property:
1p {
2 background-color: darkorange;
3}
The color
property accepts descriptive words such as red
, darkorange
, and many more.
However, there are countless different colors in the world, and not all of them can be described with simple words. That is why CSS offers more accurate ways of specifying colors, including RGB, HEX, and HSL.
RGB color
RGB stands for Red, Green, and Blue. They are the fundamental colors in computer science, and when mixed together, they can create every color in the world. The RGB color is defined with the function rgb()
:
1rgb(<red>, <green>, <blue>)
The parameters red
, green
, and blue
define the intensity of each color, using integer values between 0
and 255
. 0
is the weakest, and 255
is the strongest. For example, the following example is the same as color: red;
.
1p {
2 color: rgb(255, 0, 0);
3}
If you mix the colors together, you will be able to create all kinds of different colors.
1p {
2 color: rgb(168, 189, 45);
3}
It is recommended that you use VSCode to help you find the desired color because it is difficult to imagine the resulting color just from the numbers.
There is also a sibling function called rgba()
, which takes an extra parameter.
1p {
2 color: rgba(<red>, <green>, <blue>, <alpha>);
3}
The last parameter, alpha
, defines the transparency of the element. It accepts values from 0
to 1
. 0
being completely transparent, and 1
being completely solid.