Lesson 10: Adding Colors in CSS

❮ Previous Lesson Next Lesson ❯

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
RGB Code	color
(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 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
HEX Code	color
#ff0000
#00ff00
#0000ff
#ffff00
#ff00ff
#00ffff
#ffa500
#800080
#ffffff
#000000

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
color Name	color
red
green
blue
yellow
purple
cyan
orange
magenta
white
black

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

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>

The Output

What is CSS

HTML was the earliest markup language for the world wide web that presents text and multimedia contents to the Internet users, a marked 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.

❮ Previous Lesson Next Lesson ❯