DZone Snippets is a public source code repository. Easily build up your personal collection of code snippets, categorize them with tags / keywords, and share them with the world

Serg has posted 8 posts at DZone. View Full User Profile

CSS: Background-color

09.13.2010
| 3290 views |
  • submit to reddit
        Saved source from <a href=http://phpforms.net/tutorial/tutorial.html>http://phpforms.net/tutorial/tutorial.html</a>

Arguments
It is possible to make a color by 3 ways:
1. By the name.
Browsers support some colors by the names.
2. By the hexadecimal value
The numbers in hexadecimal code are used for colors specifying. This system opposite to the decimal one is based on the number 16 as you can see from its name. It uses the next symbols: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. The numbers from 10 to 15 are substituted to the latin letters. In the decimal system the numbers after 15 are formed by integration of 2 numbers into 1. For example, number 255 fits number FF in hexadecimal system. For avoiding misunderstandings in defining the number language, the symbol # is set before the hexadecimal value, for example #666999. Each of three colors — red, green and blue can have the values from 00 to FF. Thus, color defining is divided in three components #rrggbb, where first 2 symbols mark red component of a color, 2 medium ones define green and two last ones define dark blue. It is allowed to use the abridged form like #rgb, where every symbol neededs to be doubled. So, it is necessary to consider the record #fe0 as #ffee00.
3. By RGB
It is possible to define a color using values of red, green and blue components in decimal calculation. Each value of three colors can have values from 0 to 255. It is also possible to set a color in a percentage ratio.
Also the element “transparent” determining a transparent background is available
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>background-color</title>
  <style type="text/css">
   BODY {
    background-color: #3366CC; /* Background color of the web page */
   } 
   H1 {
    background-color: RGB(249, 201, 16); /* Background color under the title */
   }
   P {
    background-color: maroon; /* Background color under the paragraph text */
    color: white; /* Text color */
   }
  </style>
 </head>
 <body>
  <h1>Lorem ipsum dolor sit amet</h1>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem 
  nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p>
 </body>
</html>