Colors Usage in Html
Each browser has a set of standard colors for web pages that can be customized by the user
. If you don’t specify otherwise, your pages will display according to the
browser’s settings.
To change a color on your web page, you need to know the color you want to change it to,
as well as the corresponding color value (described in the following section).
There are variety of other units to measure color,including RGB (which stands for Red Green Blue)
values, RGB percentages, hexadecimal shorthand, and color names.
Hexadecimal Color
The hexadecimal system (hex) uses the same concepts as the decimal system, except
it’s based on 16 units (see Table 3-1). Because standard HTML cannot handle decimal color
values, the hexadecimal system is used to specify color values on web pages. Instead of
making up new characters to represent the remaining units after 9, the hexadecimal system
uses the first six letters of the English alphabet (A–F).
Computer monitors display color in RGB mode, where R = Red, G = Green, and B = Blue.
Each letter (R, G, and B) is represented by a value between 0 and 255, with 0 being the darkest
and 255 representing the lightest in the spectrum. In RGB, white and black have the following
values:
When using hexadecimal color values in an HTML page, you translate the color from
decimal (RGB) to hex. Each red, green, or blue value translates into a two-digit hex value. You
then combine all three of those two-digit hex values into a single string, preceded by a hash
mark. The following is an example where a hexadecimal color is used to change the text in one
paragraph to blue.
<p
style="color: #0000FF;">
Lets give it a try
lets also use color names to specify the body backgroundcolor.
<html>
<head>
<title>My First webpage</title>
</head>
<body
style="background-color:green;">
<p
style="color: #0000FF;">When using hexadecimal color values in an HTML page,
you translate the color fromdecimal (RGB) to hex. Each red, green, or blue value translates into a two-digit hex value. You then combine all three of those two-digit hex values into a single string, preceded by a hash mark. The following is an example where a hexadecimal color is used to change the text in oneparagraph to blue.</p>
</body>
</html>
This will be the results when you run the codes.
Hexadecimal Shorthand
When referencing a color that has value pairs, you can use a bit of shorthand to reduce the
amount of typing necessary. For example, a color with a hexadecimal code of 003366 can be
shortened to 036. This is because each of the two red values is the same, as are each of the blue
and green values. That wouldn’t work for a hexadecimal code of 003466, because the green
values—34—aren’t the same.
Chapter 3: Color 49
The following shows how the same blue used in the preceding code example could be
referenced, using hex shorthand.
<p
style="color: #00F;"> Give it try
RGB Values and Percentages
If hexadecimal color values already have your head spinning, . If a color’s RGB values are handy, use
those in your stylesheet in place of the hexadecimal code, like in the following:
<p
style="color: rgb(0,0,255);">
If you don’t have the RGB values handy, as when working in some page layout
you can also use the RGB percentages, like that shown in the following example.
<p
style="color: rgb(0%,0%,100%);">
Notice that a comma separates each
RGB value and the entire set of values is placed inside
parentheses. A lowercase rgb precedes those parentheses. In the case of the previous code
example,
R = 0,
G = 0, and
B = 255. As was the case with hexadecimal shorthand, RGB values
and percentages are only used to describe color in style sheets, not the older HTML color tags.
Give it a try change the color of the paragraph color with the percentages.
Color Names
HTML 3.2 and 4.0 defined a standard set of 16 colors, which could be referenced by names
in addition to hex values. The first version of CSS continued with these 16 colors, and orange
was added in CSS 2.1. Table 3-2 lists the 17 color names that are almost uniformly supported
by browsers.
<p
style="color: blue;">
Below are list of color names and their Hexdecimal, RGB values
Specify Document Colors
The preferred method of changing document colors, such as the background and the text, is
with style sheets.As with any style declaration, you can specify the background, text, and link
colors in either an inline, internal, or external style sheet. The actual properties used to do so are the
same, however, regardless of which type of style sheet you use. Unlike with the older HTML
tags previously used to change document colors, with CSS you aren’t restricted to specifying
this information within the body tag. In fact, you actually use the a tag (which is used to
add links to a web page) to change link colors in CSS. To understand, look at the following
example of an internal style sheet:
<style type="text/css">
body {background-color: white;
color: gray;}
a:link {color: blue;}
a:visited {color: purple;}
a:active {color: orange;}
</style>
Below its an example
<html>
<head>
<title>My First webpage</title>
</head><style type="text/css">
body {background-color: white;
color: gray;}
a:link {color: blue;}
a:visited {color: yellow;}
a:active {color: orange;}
</style>
<body style="background-color:green;">
<ol>
<li> <a href="Home.html">Home</a></li>
<li> <a href="Products.html">Products</a></a>
</ol>
<p style="color: white;">When using hexadecimal color values in an HTML page, you translate the color from
decimal (RGB) to hex. Each red, green, or blue value translates into a two-digit hex value. You
then combine all three of those two-digit hex values into a single string, preceded by a hash
mark. The following is an example where a hexadecimal color is used to change the text in one
paragraph to blue.</p>
</body>
</html>
This will be the results when run the codes and clink on the link you find that the visited link will change
to yellow which was previously blue .To make the page stable try to create another page and name it Products.html
Opacity
Another new addition to the CSS3 specification is the opacity property. Similar to the RGBA
values just described, opacity values are defined between 0.0 (completely transparent) and 1.0
(fully opaque).
when you add this code to the body style the page will be transparent
body{
opacity: 0.4; /* CSS3 standard */
filter:alpha(opacity=60); /* IE only */
This is how its should be placed
body{background-color: white;
color: gray;}
a:link {color: blue;}
a:visited {color: yellow;}
a:active {color: orange;}
body{
opacity: 0.4; /* CSS3 standard */
filter:alpha(opacity=60); /* IE only */
}
And the results would look below.
You can see the text appear transparent.
