CSS: working with color
CSS has several parameters to set the color of the text and background areas on a Web page. These color parameters not only replace those in the HTML, but also have additional features. For example, the traditional way to create a colored area, is to use a table. With styles you don’t need to use the tables, but use simple and convenient tools for color management.
Table 1 lists of properties of the elements to set the color.
Table 1. Text and background color management.
| Property | Value | Description | Example |
|---|---|---|---|
| color | color | Setting color | P { color: #330000 } |
| background-color |
Color | Background color | BODY { background-color: #6699FF } |
| background-image |
URL | Background image | BODY { background-image: url (bg.gif) } |
| background-repeat |
repeat | Background image repeat | BODY { background-image: url (bg.gif) background-repeat: repeat-y } |
| background-attachment |
scroll | Background scroll-down with the document | BODY { background-image: url (bg.gif) background-attachment: fixed } |
| background-position |
Percent | Start position on the page | BODY { background-position: left top } |
Setting the color
When using CSS, you can set the color in three different ways (Colors in HTML).
1. By name
Browsers assign some colors by recognizing their name (Example 1).
Example 1. Setting the color of the element by name.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
p { color: navy; background-color: yellow; }
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet...</p>
</body>
</html>2. By hexadecimal value
The color can be set by its hexadecimal value, the same way as in HTML (example 2).
Example 2. Setting the color of the element with a hexadecimal value.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
h1 { color: #fc0; }
p { color: #F9E71A; background-color: #98560F; }
</style>
</head>
<body>
<h1>Lorem ipsum</h1>
<p>Lorem ipsum dolor sit amet...</p>
</body>
</html>It’s is also possible to use shorter forms, like #fc0. This means that each character is duplicated in the end we get #ffcc00.
3. With RGB
You can get a color by using the red, green and blue colors set in decimal value. The value of each of the three colors can range from 0 to 255. You can also set the color in percentage (Example 3).
Example 3. Setting color of the element in the hexadecimal value.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
p { color: RGB(249, 231, 16); background-color: RGB(85%, 24%, 5%); }
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet...</p>
</body>
</html>Setting the background color and background image
The background color is set by the parameter background-color, and the image that is used as the background, is specified by the parameter background-image. The default value for the background color is transparent, which sets transparent background. To set the background image an absolute or relative URL of the file is used. It is recommended to specify both the background image and background color that will be used in if the image file is not present.
Example 4. Background color and background image.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
body {
background-color: #98560F; /* Background color */
background-image: url('/images/bg.gif'); /* Path to the background image */
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet...</p>
</body>
</html>If you’ve specified the background image, the property background-repeat sets its repetition and the way to do it. Valid values are repeat (repetition vertically and horizontally), repeat-x (horizontal), repeat-y (vertical) no-repeat (only one picture, without repetition), as shown in Example 5.
Example 5. Repetition of the background image.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
body {
background-image: url('/images/bg.gif'); /* The path to the background image */
background-repeat: repeat-y; /* repeat background vertically */
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet...</p>
</body>
</html>In this example, the background image is repeated vertically.
The background position is set by the parameter background-position. It has two values, the horizontal position (can be - right, left, center) and vertical (can be - top, bottom, center). The position can also be specified in percents, pixels, or other absolute units (Example 6).
Example 6. Background position.
<<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
body {
background-attachment: fixed; /* Attaching the background */
background-image: url('mybg.gif'); /* The path to the background image */
background-repeat: no-repeat; /* Undo the repetition of the background */
background-position: right bottom; /* Position of the background */
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet...</p>
</body>
</html>In this example, the background will be placed in the lower right corner of the page. If you need to set an image in the upper left corner, just ask the set form: background-position: left top.
Parameter background-attachment: fixed pins the background that it would remain on the same position when scrolling the contents of the browser window.
