Stylin' with CCS: Chapter 2 - How CSS Works

Jenna Rowe | ART 354 Web Design | February 11th, 2022



The Anatomy of a CSS Rule

The two main elements of a CSS rule include:

• A selector

• A declaration




The declaration is within two curly brackets, in those brackets includes:

• The property

• The value


There can be multiple declartions can be in one rule, grouped, + applied to the same selector.


Psuedo-Classes

Note: "e" represents an element name and "n" represents a number


UI (User Interface) Psuedo-Classes

Include the following:

• Link - a:link { }

• Hover - a:hover { }

• Visited - a:visited { }

• Active - a:active { }

• The :focus - e:focus

• The :target - e:target

Structural Psuedo-Classes

Include the folowing:

• :first-child and :last-child - the :first-child is the first listed element and the :last-child is the last listed element.

• :nth-child - normally used to improve readability


Rule Declarations

CSS property values include three main types:

• Word Values - used for visibility properties such as, border: hidden, and for style properties such as, border-style: dashed.

• Numerical Values - always followed by a unit type such as, inches, percentage, pixels, etc.

• Color Values - can be written in multiple different ways including, RGB numerical + percentages, name of the color (not the most accurate), HSL (hue, saturation, + luminance), + Hexadecimal