CSS3 Color Basics

CSS3 Basics – Part 3

Forward: In this part of the series, we look at the basics of CSS3 colors.

By: Chrysanthus Date Published: 23 Jul 2012

Introduction

This is part 3 of my series, CSS3 Basics. In this part of the series, we look at the basics of CSS3 colors. You can give text of an element (e.g. paragraph) a color and you can also give the background of an element a color. To give the text inside an element a color, what you need is to use the color property for the declaration block of the selector (name of element). Remember, the selector and the declaration block together are called the rule set. To give the background of an element a color, what you need is to use the background-color property in the rule set of the element.

If for example, you want the color, orange, for the text or the background, then the value of the corresponding property would be, orange or the color code (see below) for orange.

Note: If you cannot see any text or if you think anything is missing (missing code, missing image, broken link, etc.) just contact me at forchatrans@yahoo.com.

Color code
There are three fundamental colors in life; they are: red, green and blue. Any other color is made up of a combination of two, or three of these colors in different proportions. The proportions are indicated by numbers in a color code. The color code can be used as the value to the color property or to the background-color property.

Examples: the code value for purple is rgb(128,0,128). The first number in the parentheses is for red, the second is for green and the third is for blue. So, in CSS, purple color consists of 128 parts of red, 0 part of green and 128 parts of blue. As another example, the code for the olive color is, rgb(128,128,0). So the olive color consists of 128 parts of red, 128 parts of green and 0 part of blue.

There are other coding schemes for colors. The one I have just described to you is known as RGB, for red-green-blue, in that order. So you can talk of rgb color values. The rgb color value for the white color is, “rgb(255,255,255)”.

Basic Colors
There are 16 common colors or basic colors, whose names and colors, you have to remember by heart if you want to stay competitive in the world of web design. The names are: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow. You have to remember these names and their corresponding physical colors up by heart. However, you do not have to remember the rgb corresponding code values by heart.

The following table shows what the colors look like:

Basic Colors
Colorname	Color	RGB Code Value
black		rgb(0,0,0)
silver		rgb(192,192,192)
gray		rgb(128,128,128)
white		rgb(255,255,255)
maroon		rgb(128,0,0)
red		rgb(255,0,0)
purple		rgb(128,0,128)
fuchsia		rgb(255,0,255)
green		rgb(0,128,0)
lime		rgb(0,255,0)
olive		rgb(128,128,0)
yellow		rgb(255,255,0)
navy		rgb(0,0,128)
blue		rgb(0,0,255)
teal		rgb(0,128,128)
aqua		rgb(0,255,255)

In the meantime, you can allow this web page saved in your hard disk, so that you can always open the page and refer to the color names and rgb code values when you are designing a web page.

Foreground Color
Foreground color is simply referred to as color and it is the color of text in an element.

Illustration
The following two code samples are exactly the same. In the first code sample, the name of the color is used as value for the color. In the second code, the rgb equivalent code value is used as value for the color:

<!DOCTYPE HTML>
<html>
<head>
    <title>Illustration</title>
    <style type="text/css">
        p {background-color:fuchsia;color:yellow}
    </style>
</head>
<body>
    <p>Some text Some text Some text Some text </p>
</body>
</html>

<!DOCTYPE HTML>
<html>
<head>
    <title>Illustration</title>
    <style type="text/css">
        p {background-color:rgb(255,0,255);color:rgb(255,255,0)}
    </style>
</head>
<body>
    <p>Some text Some text Some text Some text </p>
</body>
</html>

Read and try the above two code samples individually. Note how the color names and the rgb code values have been used as values for the color (and background) attributes in the above code samples.

The HTML Block
The html double-tags form an element. It is a block level-containing element, similar to the div element. However, the html element has all the other elements and their children and grand children. The html document (element) can be given a background color using CSS.

How would you distinguished between the background color of an html element and the background color of the body element? You can know the difference if the content of the body element is short (vertically). If you know the background color for a short body element and if you know the background color for the html element, then at the browser, the background of the html element will overlap that of the body element. Read and try the following code:

<!DOCTYPE HTML>
<html>
<head>
    <title>Illustration</title>
    <style type="text/css">
        html {background-color:green}
        body {background-color:blue}
        p {background-color:fuchsia;color:yellow}
    </style>
</head>
<body>
    <p>Some text Some text Some text Some text </p>
    <p>Another Paragraph</p>
    <p>Yet another paragraph</p>
    <br><br>
</body>
</html>

For this code, the background of the html element is for the whole web page, while the background for the body element is just for a short portion around the top of the web page.

That is it for this part of the series. We stop here and continue in the next part.

Chrys

Broad Network

CSS3 Color Basics

CSS3 Basics – Part 3

Introduction

Basic Colors

Related Links

Comments