Cascade Style Sheets

Cascade Style Sheets (CSS)

A CSS is made up of two parts: the selector and declaration. The selector states which tag the rule applies. The declaration stats what happens when the rule is applied.

The declaration is made up of two elements: a property and value. A declaration must end with a semicolon.

Multiple declarations can be contained in a single rule.

Multiple selectors can be contained in a single rule. A comma must be used after each selector except the last.

h1, h2, h3 {color:red; font-weight:bold;}

Multiple rules can be applied to the same selector.

h1, h2, h3 {color:red; font-weight:bold;}

h3 {font-style:italic;}

Selectors

Selectors

Adding Styles to Web pages

Adding Styles to Web pages

Psuedo Elements and Classes

Psuedo Elements and Classes

Cascade

Styles passing from higher to lower hierarchy levels.

Cascade Rules

Cascade Rules p57:

1. Find all declarations that apply to each element and property
2. Sort by order and weight
3. Sort by specificity
4. Sort by order

Weight of declaration

Define a rule as important using the exclamation point. Marking a tag as important will override the cascade.

p {color:red !important; font-size:12pt;}

Rule Declarations

Declarations are made up of a property and value.

Example:

p {color:red;}

color = property and red = value

Values fall into three main types:

1. Words
2. Numerical values
3. Color values

Numerical values

Use to decribe the "distance" or height, width, depth, length, etc. for many values. p61

Two main groups of numerical values:

1. Absolute
2. Relative

Absolute value describes a real distance. Relative value compared to another.

Absolute value chart:

Absolute Value	Unit Abbreviation
Inches	in
Centimeters	cm
Millimeters	mm
Points	pt
Picas	pc
Pixels	px

Relative value chart:

Relative Value	Unit Abbreviation	Note
Em	em	Width of character in a font.
Ex	ex	Equivalent to the x-height of the given font.
Percentage	%

Color Values

Hexadecimal format

#RRGGBB

Percentages format

R%, G%, B% 

Styling Fonts and Text

Back to Web Development