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
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
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
In CSS, we use color to specify text colour and background-color to specify background colour, as illustrated in Example 10.1
<h1 style=”color:rgb(0,0,255)”>What is CSS</h1>
<p style=”background-color: #00ffff; color: maroon;”>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. </p>
<div style=”border:1px solid olive; color:#ff4500;background-color: rgb((255,215,0);”>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.</div>