Foundation HTML5 with CSS3

The Document

the rendered page descends from the body element, all regular text will be automatically displayed in black

as inherited from the ancestral body.

For any element that requires a different text color, another style rule can easily override that base body

color if the rule comes later in the cascade or if the style rule has a more specific selector, like this rule for

the “hero” class:

.hero {

color: blue;

}

The background-color property is not inherited by descendant elements; it applies only to the element

(or elements) selected by the CSS rule. Any element without a declared background color will simply

default to a transparent background (no color at all). If you need to, you can use the declaration

background-color: transparent; to override and reset a background color declared elsewhere.

Specifying Colors in CSS

There are two general approaches to specifying a color in CSS: by name or by value. Specifying by name

is very simple: blue is blue, red is red, and so on, but there aren’t very many predefined color names from

which to choose. Specifying a color value, on the other hand, offers a much broader palette. Furthermore,

there are a few ways to specify a color value, the two most common being RGB or hexadecimal notation.

These have been part of CSS from the beginning and every web browser supports them. CSS3 introduces

a few new options—RGBA, HSL, and HSLA—and browser support for these newer color models is a bit

less widespread so you’ll need to use them wisely. We’ll begin with the easy ones.

Color Name

The simplest and most self-explanatory way to indicate a color in CSS is by choosing from a set of

predefined color name keywords. There are 147 named colors in all: 17 “standard” color names that date

back to early versions of HTML (white, black, red, yellow, blue, green, orange, purple, gray, silver, aqua,

fuchsia, lime, maroon, navy, olive, and teal) and an additional 130 that were added in CSS level 2. We

won’t list them all here but some of our favorites are Gainsboro, LemonChiffon, MintCream, PapayaWhip,

and FireBrick. Color names aren’t case sensitive, so “DarkSlateGray” is the same as “darkslategray.” You

can see the whole list in living color at html-color-names.com

RGB

Color televisions and computer screens create color by emitting different intensities of red, green, and blue

light. These are the primary colors of light that are visible to the human eye, and various combinations of

those same three colors produce every color you can see.

In CSS, you can represent the intensity of each of the three primary colors with a number ranging from 0

(no color) to 255 (full intensity). The rgb keyword indicates that this value is an RGB color with the

individual color values contained in parentheses, separated by commas: