Basics CSS Color

CSS Basics – Part 3

CSS Course

Foreword: In this part of the series, I talk about the basics of CSS colors.

By: Chrysanthus Date Published: 15 Dec 2015

Introduction

This is part 3 of my series, CSS Basics. In this part of the series, I talk about the basics of CSS 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 its declaration block together, are called the rule set (or just rule). 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.

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 color. 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.

Note: The rgb color value for the white color is, “rgb(255,255,255)”. The rgb color value for the black color is, “rgb(0,0,0)”.

The RGB value, e.g. rgb(128,128,25) is actually a function that returns an effective value.

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 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 save this web page 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.

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) properties in the samples.

The HTML Block
The html double-tags form an element. 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 (behind) 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 near 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

Related Articles

Basics CSS Color

CSS Basics – Part 3

CSS Course

Introduction

Basic Colors

Related Links

Comments