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 Color Palettes TODO

Background Color

The first CSS property we will officially look at is background color.

The background color property allows developers to specify the background color of elements. As with all CSS multi-word properties, each word is separated with a hyphen, background-color:.

The background color property takes a color as its value. This can be a hex (i.e. #ae34ff) value, an rgb value (i.e. rgb(174, 52, 245)), or in some cases, a color name.

Background Color of the Entire Page

There easiest way to set the background color for a page is through the <body> element.

Background Color of an Element:

NOTE: I am also including the CSS property padding. These will force the page to render block-level elements, even when they have no text content. Padding is the amount of space between the element content, and the edge of the element. In the case of no content, it is the amount of space between the edge and the center of the element.

Inner Elements

When setting the background color of inner elements, you should choose colors that encourage readability, and complement the main color schemes of the site.