We have learned how to add colors to a webpage using HTML color codes in HTML Tutorial. In this lesson, we shall learn how to add colors to a webpage using CSS.
In CSS, we can use the following ways to specify the color:
- RGB Codes
- HEX Codes
- Color Names
10.1 RGB Codes
RGB codes use a combination red, green and blue colors to specify a color. Each color is 8 bits and has values ranging from 0 to 255. Therefore, they can create a total of 256x256x256=16,777,216 colors.
The syntax for RGB codes in CSS is rgb(a,b,c) where a, b, c are integers ranging from 0 to 255. Some of the RGB codes and colors and are listed in Table 10.1
Table 10.1: RGB Codes and Colors
10.2 HEX Codes
The HEX codes are six-digit, three-byte hexadecimal numbers to represent the red, green and blue components of the color.One byte represents a number in the range 00 to FF in the 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 colors.
Table 10.2: HEX Codes and Colors
10.3 Color Names
CSS allocates 147 predefined color names such as red, green, blue, cyan, magenta and more.
Table 10.3 displays some basic color names.
Table 10.3: Color Names
In CSS, we use color to specify text color 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>