In Parts 1 and 2 we learned what Cascading Style Sheets are and what the proper syntax is. In Part 3 we are going to provide some color to our web page.
The colors you use on your web site are displayed by combining red, green, and blue using the RGB (0 to 255) or Hex (00 to FF) values. There are 16 million colors available to you to use. For example, if you want to display the color black in RGB, you would use rgb(0, 0, 0). The hex equivalent of black is #000000.
Also understand that you can use three digits when expressing hex colors. So the above hex example for the color black can be expressed as #000. The three digits are basically equivalent to rgb. The first digit is red, the second green, and the third blue. as you can see, using the six digit hex value gives you more control of the color you want to display.
To make it easier, there are 147 color names defined in the HTML and CSS color specification. What this means is, if you want to use red for a section of your web page, you can define the font color for a paragraph as color: red;. You do not have to look up the rgb or hex equivalents for red.
Another place you can change the color of is the background of your web page. You can do it this way:
body {
background-color: #0000ff
color: #fff
}
As you can see in the above code snippet, you changed the page background to blue and the font color to white.
So go have some fun experimenting with colors on your web page, because in the next part we are going to build on what CSS can help us with when it comes to text on our web page.