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

Understanding Styling

Let’s look at some applied CSS, to start understanding how it will effect our webpages.

You’ll see in the example below that the <h1>, <p>, <strong>, and <em> elements are selected. Except for the first instance with the line containing .main-container, the elements are selected using “element” or “type” selectors. “Main Container” uses a class selector (.className), which will be discussed in a few pages.

Within each declaration block, there are multiple style rules, each effecting a specific aspect. Each of the declarations, for each selector, either effects border or background color.

Notice that in the displayed HTML sample below how the code creates borders make it easier to visually identify the individual elements.

Visit the next page to try styling this content yourself!