The Anatomy of Style

Select and Declare Elements and Rules Property and Value The Anatomy of Style TODO

Style Guide

Where to Style The Style Attribute The Style Element The Style Document TODO

CSS Documents

Directory Placement The <link> Tag Relationship Type Href The <link> Element TODO

CSS Applied

Comments in CSS Understanding Styling Applying Style TODO

Selector Types

Universal Selectors Element Selectors Class Selectors ID Selectors TODO

Cascading

Cascading in CSS Rules Order Specificity Setting Importance TODO

Exploring Color

Specifying Color Color Names RGB Values Hex Codes Saturated Color Desaturated Color (Grayscale) Combining Colors TODO

Using Color

Background Color Text Color Opacity Basic Positioning Learn More TODO

Opacity

In addition to setting the color of background elements and text, developers may dictate the opacity of elements themselves or just the background color of an element.

Opacity is set as a ratio between 0.0 - 1.0. This controls how much, if at all, elements behind the element in question may be seen. A value of 0.0 would make the element in question invisible, and 1.0, make it totally opaque.

There are two ways to dictate opacity.

Background Opacity

You can pass rgba() (as opposed to RGB ()) to change the opacity of the background color only.

Like, rgb(), rgba(), takes three numbers to define the ratios of red, green, & blue. However, rgba() also take a fourth number, in the range of 0.0-1.0, to define the opacity level.

For example, set a content box to be black at half-opacity:

CSS

.text-box {
    background-color: rgba(0,0,0,0.5);
}

Element Opacity

If the goal is to change the opacity of an entire element, as well as its contents, then you can call the separate opacity: property. Like the fourth argument for rgba(), this property takes a single number, between 0.0-1.0, to represent the opacity of an element.

For example, the contents of a container are set at half-opacity:

CSS

div.inner-container {
    opacity: 0.5;
}

Example

The following example creates 4 elements:

.body-1 is the furthest back with no opacity values set.
.box-1.inner is nested within box one. The color is set to green, and CSS specifies the opacity: property to be set to 0.5. Notice how both the color of the box, as well as the white text, are affected by the red of box-1.
box-2 is a separate element that has been positioned to overlap the other two boxes. Notice that it uses the rgba() property, which allows the background color to bleed through, but NOT the text.
image-box is just a flat, black graphic.