Colours in CSS

You already changed colours but so far you used colour names to do it.  There are over 200 named colours but there is a better way to select colours.

Open _template.css and save it as beginner.css.

Open links.html and save it as colours.html.  Add a link element pointing to beginner.css (you could copy the one from external.html and edit the file name).  Test the page but there should be no styles.


Find the body rule set in the style sheet and add this rule between the two braces (curly brackets):


Indent it once to show that it is inside the brackets.  Save both files and view the HTML one in a browser.  The whole page should be red.

The numbers inside the brackets are the amount of each of the three primary colours which the browser should use when colouring the body element background.  0 is the lowest and 255 is the highest.  So this one has maximum red and no green or blue.  The current page (colours.html) has a range of HTML elements (p,h1,h2,a,ul, span).  Try each of the six following colour combinations by styling those six types of elements:


This is mixing light so the end results are not the same as mixing paints or pigments). 

Various text with different background colours

Using color, background-color and rgb you should now be able to colour anything.  If you have trouble working out the colours just search on-line for rgb colour picker.

You can also use percent as the value but that is less precise and less traditional: