166 CHAPTER 4 Getting started with CSS3
After this lesson, you will be able to:
■■Set CSS colors.
■■Implement a layout by using the CSS box model.
■■Position <div> elements.Estimated lesson time: 30 minutesWorking with CSS colors
With CSS, colors can be specified in several ways, such as by color names, RGB color values,
and ARGB color values. You can set the transparency or opacity.
RGB values have been available since the earliest version of CSS. The RGB value is a six-
character field that represents a two-character hexadecimal value for the amount of red, then
green, and then blue, and is prefixed with the pound (#) symbol. A value of 00 (two zeros)
is the minimum value, and ff represents the maximum value for that color. This represents
0–255 in decimal. The following are examples of RGB values.
■■black #000000
■■white #ffffff
■■red #ff0000
■■green #008000
■■lime #00ff00
■■blue #0000ff
■■yellow #ffff00
■■gray #808080
An example of setting the background color of an HTML document to yellow is as follows.
body {
background-color: #ffff00;
}NOTE SHORTCUT FOR SETTING THE VALUE OF COLORS
Instead of representing the RGB value as #rrggbb, you might be able to represent the RGB
value as #rgb. If the two-character codes for red, green, and blue are the same, you can use
a single character for each to reduce the six-character value to a three-character value. For
example, yellow is #ffff00 where the red component’s characters are the same, the green
component’s characters are the same, and the blue component’s characters are the same.
Therefore, yellow can be represented as three-character #ff0. This is a shortcut, and can
only be used to represent the value as three characters. When the browser reads the color
value as three characters, it will expand each character to be two of the same character. A
color of #123 is the same as #112233, not #000123.