Colors
It isn’t difficult to inject some color into your web pages. Style sheet rules have two color-related properties, listed in Table 6-1. You’ll learn about the types of values you can use when setting colors (color names, color codes, and RGB values) in the following sections.
Table 6-1. Color properties.
Property | Description | Common Values | Can Be Inherited? |
|---|---|---|---|
color | The color of the text. This is a handy way to make headings or emphasized text stand out. | A color name, color code, or RGB color value. | Yes |
background-color | The color behind the text for just that element. | A color name, color code, or RGB color value. You can also use the word “transparent.” | No[a] |
[a] The background-color style property doesn’t use inheritance (Inheritance). If you give the <body> section of a page a blue background and you then place a heading on the page, the heading doesn’t inherit the blue background. However, there’s a trick. If you don’t explicitly assign a background color to an element, its color is transparent. This means the color of the containing element shows through, which has the same effect as inheritance. So the heading in this example still ends up with the appearance of a blue background. | |||
The color property is easy to understand; it’s the color of your text. The background-color property is a little more unusual.
If you apply a background color to the <body> element of a web page, the whole page adopts that color, as you might expect. However, if you specify a background color for an individual ...
Get Creating a Website: The Missing Manual, 3rd Edition now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
