Learning to control and apply color in Web pages is easy and fun. Remembering all the different methods for adding color can become confusing, however. The following chart lists the different ways you can use Cascading Style Sheets to apply color to the different elements on your pages:
|
To Do This |
Use This |
|---|---|
|
Control background color (CSS) |
selector {background-color: value} example: body {background-color: red} |
|
Control foreground (font) color (CSS) |
selector {color: value} example: h1 {color: red} |
|
Specify colors by hex code (HTML or CSS) |
#ffffff CSS example:td {background-color: #ff0000} HTML example: <td bgcolor="#ff0000"> |
|
Specify colors by rgb percentages (CSS only) |
rgb(#%,#%,#%) example: body {color: rgb(100%,0%,0%)} |
|
Specify colors by rgb numeric values (CSS only) |
rgb(#,#,#) example: body {color: rgb(255,0,0) |
|
Create a special class selector (CSS) |
selector.className example : h1.red |
|
Apply a class to an element |
<element class="className"> example: <h1 class=“red”> |