You can set the colours for almost anything in CSS. There are two settings:
- the foreground colour - borders, text etc.
- the background of the element (BODY, DIV etc.)
Using words for colours
You have done this. To set the colour for the BODY (and everything in it). Note the US spelling of color.:
body {
color:red;
background-color:blue;
}
This goes into a stylesheet (either in the HEAD as an embedded style or into an external stylesheet). Open externalcss.html and myfirststyles.css or make a new page and stylesheet. and put the above inot the stylesheet (replace any styles already there).
Hexadecimal
Words are easy but a bit limiting. Hex gives you ultimate flexibility but what might at first seem unnecessary complication.
There are two things you need to understand:
- hexadecimal is just numbers but they look weird (the numbers are 0 to 15 but written as 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F)
- the code for colours comes in three groups of two hex numbers each such as 00FF9F here:
- two digits for red (e.g. 00 means no red)
- two digits for green (e.g. FF means maximum green)
- two digits for blue (e.g. 9F means about half the possible amount of blue)
As you can see those three pairs of numbers (00 FF and 9F) create a bluish green background (that is the background colour of the list).
Insert the following styles in a suitable location and then play with the colour values:
body {
color:#FF0000;
background-color:#0000FF;
}
You can find lots of colour picker pages to get hexadecimal codes on the Web or in graphics applications (even MS Paint). w3schools lists the named colours and their hex equivalent to get you started. Or just play.
Decimal or RGB
Exactly the same colours can be produced using decimal:
color:rgb(0,0,255);
Again there are three values but this time they are decimal values separated by commas. The range is 0 to 255 which is exactly the same as 00 to FF. The example above would be pure blue.
