How to change font colors using CSS

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;

}