Styling Colors and Backgrounds Using CSS
As you’d expect, CSS supports many styles to set colors and backgrounds. Here’s a list of the most popular color and background styles:
-
color: Sets the foreground color (in hexadecimal format, like #FFFFFF), or names of colors.
-
background-color: Sets the background color (in hexadecimal format, like #FFFFFF), or names of colors.
-
background-image: Sets the background image (as a URL).
-
background-repeat: Specifies whether the background image should be tiled, set to repeat, repeat-x, repeat-y, or no-repeat.
-
background-attachment: Specifies whether the background scrolls with the rest of the document, set to scroll or fixed.
-
background-position: Sets the initial position of the background, set to top, center, bottom, left, or right.
colorStyles.html is an example that puts these styles to work:
<html> <head> <title> Styling foregrounds and backgrounds using CSS </title> </head> <body style="background-color: #55DDDD"> <div align="left"> CEO <br> Terrific HTML Designs, Inc. <br> New York </div> <p> Dear you: <div align="center" style="color: #FF0000; background-color: #FFFFFF; font-style: italic"> <br> How's this for styling? <br> <br> </div> <div align="right"> <p> CEO <br> Exceptional CSS Styles, Inc. <br> San Francisco </div> </body> </html>
You can see colorStyles.html at work in Figure 10.9.
Figure 10.9: Styling colors using CSS
| Note | You can specify colors using the standard HTML color triplets like this: #rrggbb. In CSS, you can also specify colors using the rgb function, where you pass three color values to that function: red, green, and blue values, which range from 0 to 255. |
Here’s an example, colorTable.html, which displays colors in a table:
<html> <head> <title> Setting colors </title> </head> <body style="background-color: #55DDDD"> <h1>Setting colors</h1> <table border="2" width="400" height="200" style="text-align:center"> <tr> <th style="background-color: rgb(255, 0, 0)">Now</th> <th style="background-color: rgb(255, 0, 0)">is</th> <th style="background-color: rgb(0, 255, 0)">the</th> <th style="background-color: rgb(255, 0, 0)">time</th> </tr> . . .
In fact, you can set colors using names in CSS, like red, blue, orange, cyan, white, and so on. Here’s how that works in colorTable.html:
<html> <head> <title> Setting colors </title> </head> <body style="background-color: #55DDDD"> <h1>Setting colors</h1> <table border="2" width="400" height="200" style="text-align:center"> <tr> <th style="background-color: rgb(255, 0, 0)">Now</th> <th style="background-color: rgb(255, 0, 0)">is</th> <th style="background-color: rgb(0, 255, 0)">the</th> <th style="background-color: rgb(255, 0, 0)">time</th> </tr> <tr> <td style="background-color: rgb(0, 0, 255)">Now</td> <td style="background-color: rgb(0, 0, 0); color: rgb(255, 255, 255)"> is </td> <td style="background-color: rgb(0, 255, 0)">the</td> <td style="background-color: green">time</td> </tr> <tr> <td style="background-color: rgb(0, 0, 0); color: white"> Now </td> <td style="background-color: rgb(255, 255, 255)">is</td> <td style="background-color: rgb(0, 0, 0); color: rgb(255, 255, 255)"> the </td> <td style= "background-color: rgb(255, 255, 255)">time</td> </tr> <tr> <td style="background-color: rgb(255, 255, 0)">Now</td> <td style="background-color: rgb(0, 0, 0); color: rgb(255, 255, 255)"> is </td> <td style="background-color: cyan">the</td> <td style="background-color: blue">time</td> </tr> </table> </body> </html>
You can see colorTable.html at work (in black and white, anyway) in Figure 10.10.
Figure 10.10: Setting colors
Besides standard colors like green, red, and so on, most modern browsers support a great number of color names like ivory, sand, viridian, and more. Give it a try!
