3G

Font Colors

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 color names you can use, see the bottom of this page.


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.


<<<Previous                                     Next>>>





============================================================

Web-Safe Colors

*000*	300	600	900	C00	*F00*
*003*	303	603	903	C03	*F03*
006	306	606	906	C06	F06
009	309	609	909	C09	F09
00C	30C	60C	90C	C0C	F0C
*00F*	30F	60F	90F	C0F	*F0F*
030	330	630	930	C30	F30
033	333	633	933	C33	F33
036	336	636	936	C36	F36
039	339	639	939	C39	F39
03C	33C	63C	93C	C3C	F3C
03F	33F	63F	93F	C3F	F3F
060	360	660	960	C60	F60
063	363	663	963	C63	F63
066	366	666	966	C66	F66
069	369	669	969	C69	F69
06C	36C	66C	96C	C6C	F6C
06F	36F	66F	96F	C6F	F6F
090	390	690	990	C90	F90
093	393	693	993	C93	F93
096	396	696	996	C96	F96
099	399	699	999	C99	F99
09C	39C	69C	99C	C9C	F9C
09F	39F	69F	99F	C9F	F9F
0C0	3C0	6C0	9C0	CC0	FC0
0C3	3C3	6C3	9C3	CC3	FC3
0C6	3C6	6C6	9C6	CC6	FC6
0C9	3C9	6C9	9C9	CC9	FC9
0CC	3CC	6CC	9CC	CCC	FCC
0CF	3CF	6CF	9CF	CCF	FCF
*0F0*	3F0	*6F0*	9F0	CF0	*FF0*
0F3	*3F3*	*6F3*	9F3	CF3	*FF3*
*0F6*	*3F6*	6F6	9F6	*CF6*	*FF6*
0F9	3F9	6F9	9F9	CF9	FF9
*0FC*	*3FC*	6FC	9FC	CFC	FFC
*0FF*	*3FF*	*6FF*	9FF	CFF	*FFF*