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

Order

The first cascading rule can be referred to as “order,” or “the last rule.”” Essentially, if two or more selectors are the same, than the last one will take precedence.

In the following example, the second rule overwrites the aspects duplicated in the first (i.e. the border specification applies from the first rule, but the color and background-color specs are overwritten).

Why?

This may seem like a funny idea right now that may lead to poorly written code. However, it is common for a developer to use pre-made CSS “frameworks” that they load in as separate documents. They may then want to customize their site by overwriting specific rules. Rather than try to change the declarations, they will create a new CSS document, that keeps track of their specific changes and rules. To ensure these rules take precedence, the developer then simply needs to load in their sheet last.

IMPORTANT: In the following example, three documents are brought in, but notice that the developer’s is brought in last.

HTML

<head>
  <link rel="stylesheet" href="https://www.example.com/reset.css">
  <link rel="stylesheet" href="./css/bootstrap.css">
  <link rel="stylesheet" href="./css/my-custom-style.css">
</head>