CSS Tutorial Lesson 10: Colours

We have learned how to add colours to a webpage using HTML colour codes in HTML Tutorial. In this lesson, we shall learn how to add colours to a webpage using CSS.
In CSS, we can use the following ways to specify the colour:

• RGB Codes
• HEX Codes
• Colour Names

10.1 RGB Codes

RGB codes use a combination red, green and blue colours to specify a colour. Each colour is 8 bits and has values ranging from 0 to 255. Therefore, they can create a total of 256x256x256=16,777,216 colours.
The syntax for RGB codes in CSS is rgb(a,b,c) where  a, b, c are integers range from 0 to 255. Some of the RGB codes and colours and are listed in Table 10.1

Table 10.1: RGB Codes and Colours

RGB Code	Colour
(255,0,0)
(0,255,0)
(0,0,255)
(255,255,0)
(255,0,255)
(0,255,255)
(255,165,0)
(128,0,128)
(255,255,255)
(0,0,0)

10.2 HEX Codes

The HEX codes are six-digit, three-byte hexadecimal numbers to represent the red, green and blue components of the colour.One byte represents a number in the range 00 to FF in hexadecimal number system. The syntax for HEX code in CSS is #aabbcc, where aabbcc is a combination of six-digit hexadecimal number. Table 10.2 shows some of the HEX Codes and the corresponding colours.

Table 10.2: HEX Codes and Colours

HEX Code	Colour
#ff0000
#00ff00
#0000ff
#ffff00
#ff00ff
#00ffff
#ffa500
#800080
#ffffff
#000000

10.3 Colour Names

CSS allocates 147 predefined colour names such as red, green, blue, cyan, magenta and more.
Table 10.3 displays some basic colour names.

Table 10.3: Colour Names

Colour Name	Colour
red
green
blue
yellow
purple
cyan
orange
magenta
white
black

In CSS, we use color to specify text colour and background-color to specify background colour, as illustrated in Example 10.1

Example 10.1

What is CSS

HTML was the earliest mark-up language for the world wide web that presents text and multimedia contents to the Internet users, a mark improvement on the earlier text-only navigators or data distribution systems such as Gopher, FTP and WAIS.

Web editing language has now evolved into more recent and more powerful HTML5 and CSS(Cascading Style Sheet). CSS has made formatting and presenting web documents easier and more systematic. CSS is a W3C technology that allows web developers to specify the presentation of elements on a webpage separately from the structure of the documents. The separation of structure from presentation makes creation and maintenance of web pages easier.  Follow the lessons below to learn CSS.

The Output

What is CSS

HTML was the earliest mark-up language for the world wide web that presents text and multimedia contents to the Internet users, a mark improvement on the earlier text-only navigators or data distribution systems such as Gopher, FTP and WAIS.

Web editing language has now evolved into more recent and more powerful HTML5 and CSS(Cascading Style Sheet). CSS has made formatting and presenting web documents easier and more systematic. CSS is a W3C technology that allows web developers to specify the presentation of elements on a webpage separately from the structure of the documents. The separation of structure from presentation makes creation and maintenance of web pages easier. Follow the lessons below to learn CSS.