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
Pseudo Classes
Classes that cause rules to be applied when a specific event happens. These classes are not attached to tags in markup. p50
Anchor Link Pseudo Classes
Commonly used with hyperlinks. p50
Link Visited Hover Active
Other Useful Pseudo-Classes
This rule selects the first-child element with the name x.
x:first-child
This rule selects the focus of the user with the name x.
x:focus
Pseudo-elements
Provides the effect of extra markup without the markup in your code.
This rule selects the first letter of tag name x and applies your style.
x:first-letter
This rule selects the first line of tag name x and applies your style.
x:first-line
This rule adds specified text before an element of tag name x.
x:before
This rule adds specified text after an element of tag name x.
x:after
Example of x:before and x:after
h1.age:before {content:"Age:"}
h1.age:after {content:"years old."}
Code <h1 class="age">36</h1> displays "Age: 36 years old."
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%