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
Adding Styles to Web pages
Psuedo Elements and Classes
Cascade
Styles passing from higher to lower hierarchy levels.
Cascade Rules
Cascade Rules p57:
- Find all declarations that apply to each element and property
- Sort by order and weight
- Sort by specificity
- 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:
- Words
- Numerical values
- 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:
- Absolute
- 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%