Font Colors

We've produced a video to go with this lesson. It's recommended that you read the text below as well, though. The video is here:

Web Color Values

There are quite a lot of other font styles you can use in your CSS. We'll start with font colours. (Strictly speaking, though, COLOR is not a font style - it can be used just about anywhere to colour lots of different things.):
You can have just about any font colour you want for your text (British English users, note the missing "u" after the second "o". The American spelling is used in HTML and CSS). To specify a colour, you can use one of three formats:

• The name of a colour spelled out
• The name of a colour as a Hexadecimal value
• The name of a colour as a RGB value

There is a rather long and exotic list of colour names you can use, things like Cadet Blue, Ghost White, Lemon Chiffon. But you can also use a simple colour name like red or blue. The CSS code is this:

H1 {

text-align: center;
font-family: Courier New, Courier, Mono;
color: red;

}

So you type the word "color" followed by a colon. You then type the name of your colour.
There are 17 common colours, and 130 not so common. The common colours you can use are: aqua, black, blue, fuchsia, gray, grey, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow.
For a full list of all the colour names you can use, see this Wikipedia page:

Wikipedia - Web Colors

Hexadecimal values

Hexadecimal values are used quite a lot in web design. If you've never heard of them before they use the number 0 to 9, and the letters A to F (Base 16). In Base 16, the letters are used instead of the numbers 10, 11, 12, 13, 14 and 15. So A = 10, B=11, C=12, etc. If you want to represent the number 256 in Hexadecimal then it's FF.
Three colour values are used, one for Red, one for Green, and one for Blue. Each colour value has two Hexadecimal place-holders. For example, here's the colour Red:

#FF0000

Here's the colour Green:

#00FF00

And here's the colour Blue:

#0000FF

So red has two letter F's in the Red position, two zeros in the green position, and two zeros in the blue position. In other words, switch the red value full on, and switch the green and blue values off.
Green has two zeros, two F's, then two zeros again. Blue has four zeros then two F's.
Black just has 6 zeros, meaning switch Red, Green and Blue off.
Note that you need to use the hash/pound symbol ( # ) before the six place-holder values.
You can combine the Hexadecimal number and letter values:

#2F0B99

Try them out for yourself in your code:

H1 {

text-align: center;
font-family: Courier New, Courier, Mono;
color: #2F0B99;

}

Exercise
Change the values in the six positions, using the numbers 0 to 9, and the letters A to F. What are the following colours?

color: #1BAA12;

color: #1087AC;

color: #451DE2;

RGB values

You can use RGB values in your CSS, if you prefer. (RGB stands for Red, Green, Blue.) Again, place-holders are used for the different colour values. This time, you use the number 0 to 255. You use them like this:

color: RGB(255, 0, 0);

Note that the number are typed between a pair of round brackets, and are separated by comas.

Exercise
Play around with the RGB values. What are the following colours?

color: RGB(0, 255, 0);

color: RGB(125, 125, 0);

color: RGB(255, 255, 10);

Instead of experimenting to get the colour you want, an easy way to get the correct Hexadecimal or RGB colour is to type the words "color picker" into a search engine like Google. You'll then have plenty of web sites that give you're the correct values to type simply by playing around with colour sliders.

In the next lesson, you'll learn about font sizes.

Posted in: Tips,Trick,Tutorial,Web Design,Web Design 3 (Getting started with CSS)