Foundation HTML5 with CSS3

(Steven Felgate) #1
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:
Free download pdf