Home

Colors in Styles

Introduction to Colors

Many aspects of a webpage, such as text, use colors. Although HTML supports colors, it is suggested that you use CSS to apply a color to an element. One of the few elements on which you should apply a color solely in HTML is the horizontal line, represented by the <hr> tag.

There are three techniques used to specify a color value.

Applying a Color to Text

As seen in Lesson 2, to let you apply a color to text, CSS provides a style named color.

The Name of a Color

The classic way to specify a color is by using a name for the color. To use a color, specify its name as the value of the style. As mentioned in Lesson 2, many names of colors are available. Here is an example:

<!DOCTYPE html>
<html>
<head>
<title>The Metric System</title>

<style type="text/css">
#top-title {
    color:       Maroon;
    font-weight: 700;
    text-shadow: 0.10em 0.10em 0.08em Gold;
    font:        bold 24pt Georgia, Garamond, serif;
}

#introduction { color: ForestGreen }
#length-title { color: Brown  }
#mass-title   { color: Tomato }
#time-title   { color: MediumOrchid }

#length-description { color: RoyalBlue  }
#mass-description   { color: DodgerBlue }
#time-description   { color: Teal       }

#length-title, #mass-title, #time-title { font-weight: Bold; }

#introduction, #length-description, #mass-description
{
    font-weight: normal;
    text-align:  justify;
}

#introduction, #length-title, #mass-title, #time-title,
#length-description, #mass-description, #time-description {
    font-size:   14pt;
    font-family: Times New Roman, Georgia, Garamond, serif;
}
#copyright { color: Goldenrod }

#references { color: red; }

#top-title, #references, #copyright, #references { text-align: center; }
a.resources:link {
    color:           Red;
    text-decoration: none;
    font-size:       12pt;
    font-family:     Bookman Old Style, Garamond, serif; }

a.resources:active {
    color:           DarkSalmon;
    text-decoration: none;
    font-size:       12pt;
    font-family:     Bookman Old Style, Garamond, serif; }

a.resources:visited {
    color:           DeepSkyBlue;
    text-decoration: none;
    font-size:       12pt;
    font-family:     Bookman Old Style, Garamond, serif; }

a.resources:hover {
    color:           FireBrick;
    font-size:       12pt;
    text-decoration: none;
    font-family:     Bookman Old Style, Garamond, serif; }
</style>
</head>
<body>

<p id="top-title">The Metric System</p>

<p id="introduction">The metric system is a set of standards that provides common 
for measurements in length, mass, time, etc.</p>
    
<p id="length-title">Length</p>
<p id="length-description">Length is used to measure the distance. The values are 
in scales with the meter (or metre) as the central point. Variants include the 
milimeter and the kilometer.</p>

<p id="mass-title">Mass</p>
<p id="mass-description">The mass or weight measures the gravity of an object. 
It is expressed in numbers that have the gram as its central unit.</p>

<p id="time-title">Time</p>

<p id="time-description">The time measures regular lapses or occurrences. Units 
include days, months, years, decades, centuries, but also  hours, minutess, 
seconds, and miliseconds</p>

<p id="references"><a class="resources" href="history.htm/">History of Metric 
System</a> | <a href="standards.htm" class="resources">International 
Standards</a> | <a href="resources.htm" class="resources">Resources</a></p>

<p id="copyright">Copyright &copy;, 2015</p>
</body>
</html>

This would produce:

The Name pf a Color

The Color as a Hexadecimal Value

A color is created as a combination of three numbers. Each of the numbers ranges from 0 to 255, which makes 256 possible values. The combination of the three numbers produces 256 * 256 * 256 = 16777216. That's a huge number of colors.

To represent a color by its numeric value, you use its hexadecimal value. Instead of the 10 digits used in the regular numeric system, the hexadecimal system uses 16 symbols as 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, and F (the letters can be used in uppercase or lowercase). In fact, each of the numbers from 0 to 255 becomes a combination of these 16 symbols, starting at 00 and ending at FF. An example would be 9F. Another example is 6A. Another example is C3. A color is then created by combining such three values. Our resulting example would be 9F, followed by 6A, and followed by C3, to get 9F6AC3. Because this looks like a string, to indicate that it is a hexadecimal number, it must start with the # symbol, as in #9F6AC3. You use such a value as a color. Here is an example:

<!DOCTYPE html>
<html>
<head>
<title>The Metric System</title>

<style type="text/css">
#top-title {
    color:       #000000;
    font-weight: 900;
    text-shadow: 0.10em 0.10em 0.08em #993333;
    font:        bold 24pt Georgia, Garamond, serif;
}

#introduction      { color: #006600 }

#force-title       { color: #CC3300 }
#temperature-title { color: #0000FF }
#power-title       { color: #FF0066 }

#force-description       { color: #6600CC }
#temperature-description { color: #CC3300 }
#power-description       { color: #336699 }

#force-title, #temperature-title, #power-title { font-weight: 900; }

#introduction, #force-description,
#temperature-description, #power-description
{
    font-weight: normal;
    text-align:  justify;
}

#introduction, #force-title, #temperature-title, #power-title {
    font-size:   14pt;
    font-family: Times New Roman, Georgia, Garamond, serif;
}
#copyright  { color: #CE0A0F }
#references { color: #990066 }

#top-title, #references, #copyright { text-align: center; }

a.resources:link {
    color:           #0086DF;
    text-decoration: none;
    font-size:       12pt;
    font-family:     Bookman Old Style, Garamond, serif; }

a.resources:active {
    color:           #99CCFF;
    text-decoration: none;
    font-size:       12pt;
    font-family:     Bookman Old Style, Garamond, serif; }

a.resources:visited {
    color:           #85582C;
    text-decoration: none;
    font-size:       12pt;
    font-family:     Bookman Old Style, Garamond, serif; }

a.resources:hover {
    color:           #00B900;
    font-size:       12pt;
    text-decoration: none;
    font-family:     Bookman Old Style, Garamond, serif; }
</style>
</head>
<body>

<p id="top-title">The Metric System</p>

<p id="introduction">The metric system is a set of standards that provides common 
for measurements in force, temperature, power, etc.</p>

<p id="force-title">Force</p>
<p id="force-description">Force is the ability of an object to move from one 
location to another. This is also referred to as change in motion. This change is 
expressed in newton units.</p>
    
<p id="temperature-title">Temperature</p>
<p id="temperature-description">Temperature is the value of intensity between hot 
and cold. In temperature is one of the value that is provided as a comparison in 
intensity from two extremes. The value can be expressed in Celsius, Fahrenheit, 
or Kelvin.</p>

<p id="power-title">Power</p>
<p id="power-description">Power is the intensity of work or energy produced by an 
object. Because there are different forms of energy, there are also different types 
of power, but the most common unit to represent power is the watt.</p>

<p id="references"><a class="resources" href="history.htm/">History of Metric 
System</a> | <a href="standards.htm" class="resources">International 
Standards</a> | <a href="resources.htm" class="resources">Resources</a></p>

<p id="copyright">Copyright &copy;, 2015</p>
</body>
</html>

This would produce:

The Color as a Hexadecimal Value

If the first and the second characters are the same, and if the third and the fourth characters are the same, and if the fifth and the sixth characters are the same, then you can specify the color with only the first, the third, and the fifth characters. As a result, #cc9966 is the same as #c96. Here are examples from the above code:

#top-title {
    color:       #000;
    font-weight: 900;
    text-shadow: 0.10em 0.10em 0.08em #933;
    font:        bold 24pt Georgia, Garamond, serif;
}

#introduction      { color: #060;      }

#force-title       { color: #C30;       }
#temperature-title { color: #00F;        }
#power-title       { color: #F06}

#force-description       { color: #60C; }
#temperature-description { color: #C30;  }
#power-description       { color: #369;  }

#force-title, #temperature-title, #power-title { font-weight: 900; }

#introduction, #force-description,
#temperature-description, #power-description
{
    font-weight: normal;
    text-align:  justify;
}

#introduction, #force-title, #temperature-title, #power-title {
    font-size:   14pt;
    font-family: Times New Roman, Georgia, Garamond, serif;
}
#copyright  { color: #CE0A0F }
#references { color: #906 }

#top-title, #references, #copyright { text-align: center; }
a.resources:link {
    color:           #0086DF;
    text-decoration: none;
    font-size:       12pt;
    font-family:     Bookman Old Style, Garamond, serif; }

a.resources:active {
    color:           #9CF;
    text-decoration: none;
    font-size:       12pt;
    font-family:     Bookman Old Style, Garamond, serif; }

a.resources:visited {
    color:           #85582C;
    text-decoration: none;
    font-size:       12pt;
    font-family:     Bookman Old Style, Garamond, serif; }

a.resources:hover {
    color:           #00B900;
    font-size:       12pt;
    text-decoration: none;
    font-family:     Bookman Old Style, Garamond, serif; }
 
 
 

The Color as a Red-Green-Blue Value

As seen in the previous section, a color is a combination of three values and each of the value is a number between 0 and 255:

  • The first or left part of the value represents the Red portion. The R letter is used to represent it
  • The second part is the G or Green portion
  • The third section is referred to as the Blue part represented with the B letter. As a result, a color is expressed as an RGB value.

Remember that each of the R, G, or B values uses a number between 0 and 255. To support colors as combinations of three values, CSS provides a macro (or function) named rgb. To use it, in the parentheses of rgb(), enter a value for the red portion, a value for the green portion, and a value for the blue portion. They must be separated with commas. Here is an example:

<!DOCTYPE html>
<html>
<head>
<title>The Metric System</title>

<style type="text/css">
#top-title {
    color:       RGB(35, 72, 56);
    font-weight: 900;
    text-shadow: 0.10em 0.10em 0.08em rgb(187, 208, 36);
    font:        bold 24pt Georgia, Garamond, serif;
}

#introduction      { color: RGB(  0, 128, 192); }
#frequency-title   { color: RGB(185,   0,   0); }
#energy-title      { color: RGB( 43,  89,  53); }

#frequency-description   { color: rgb(160, 140,  24) }
#energy-description      { color: rgb(217,   0, 108) }

#frequency-title , #energy-title { font-weight: 800; }

#introduction, #frequency-description, #energy-description
{
    font-weight: normal;
    text-align:  justify;
}

#introduction, #frequency-title, #energy-title {
    font-size:   14pt;
    font-family: Times New Roman, Georgia, Garamond, serif;
}
#copyright { color: rgb(185, 0, 92) }

#references {
    color: rgb(225, 25, 5);
    text-align: center;
}

#top-title, #references, #copyright { text-align: center; }
a.resources:link {
    color:           Rgb(0, 0, 245);
    text-decoration: none;
    font-size:       12pt;
    font-family:     Bookman Old Style, Garamond, serif; }

a.resources:active {
    color:           Rgb(0, 89, 179);
    text-decoration: none;
    font-size:       12pt;
    font-family:     Bookman Old Style, Garamond, serif; }

a.resources:visited {
    color:           Rgb(16, 128, 64);
    text-decoration: none;
    font-size:       12pt;
    font-family:     Bookman Old Style, Garamond, serif; }

a.resources:hover {
    color:           Rgb(208, 24, 4);
    font-size:       12pt;
    text-decoration: none;
    font-family:     Bookman Old Style, Garamond, serif; }
</style>
</head>
<body>

<p id="top-title">The Metric System</p>

<p id="introduction">The metric system is a set of standards that provides common 
for measurements in frequency, energy, etc.</p>

<p id="frequency-title">Frequency</p>
<p id="frequency-description">Frequency is the rate at which something repeats 
itself. For this reason, frequeny is also referred to as rate of occurrences. 
Although there are different types of occurrences, because frequency is a subject 
of time (the number of times something occurs in a specific time period), the 
frequency is expressed in a unit named hertz.</p>

<p id="energy-title">Energy</p>
<p id="energy-description">Energy is the ability of an object to be transformed 
from one state or phase into another state or phase. There are different types of 
energy but their common unit is the joule.</p>

<p id="references"><a class="resources" href="history.htm/">History of Metric 
System</a> | <a href="standards.htm" class="resources">International Standards</a> | 
<a href="resources.htm" class="resources">Resources</a></p>

<p id="copyright">Copyright &copy;, 2015</p>
</body>
</html>

This would produce:

The Color as a Red-Green-Blue Value

At the time of this writing, you can find the names and combinations of colors at: https://msdn.microsoft.com/en-us/library/ms531197(v=vs.85).aspx (the other links on the same page, under the heading, provide the names and details on colors).

   
   
 

Previous Copyright © 2015-2016, FunctionX Next