|
|
| Line 29: |
Line 29: |
| [[Psuedo Elements and Classes]] | | [[Psuedo Elements and Classes]] |
|
| |
|
| == Cascade == | | == Cascade and Rule Declarations == |
|
| |
|
| Styles passing from higher to lower hierarchy levels.
| | [[Cascade and Rule Declarations]] |
| | |
| === 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.
| |
| | |
| <pre>p {color:red !important; font-size:12pt;}</pre>
| |
| | |
| == Rule Declarations ==
| |
| | |
| Declarations are made up of a property and value.
| |
| | |
| Example:
| |
| <pre>p {color:red;}</pre>
| |
| | |
| 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:
| |
| | |
| {| border="1" cellspacing="0" cellpadding="5" align="center"
| |
| ! Absolute Value
| |
| ! Unit Abbreviation
| |
| |-
| |
| | Inches
| |
| | in
| |
| |-
| |
| | Centimeters
| |
| | cm
| |
| |-
| |
| | Millimeters
| |
| | mm
| |
| |-
| |
| | Points
| |
| | pt
| |
| |-
| |
| | Picas
| |
| | pc
| |
| |-
| |
| | Pixels
| |
| | px
| |
| |}
| |
| | |
| Relative value chart:
| |
| | |
| {| border="1" cellspacing="0" cellpadding="5" align="center"
| |
| ! 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
| |
| | |
| <pre>#RRGGBB</pre>
| |
| | |
| Percentages format
| |
| | |
| <pre>R%, G%, B% </pre>
| |
|
| |
|
| [[Styling Fonts and Text]] | | [[Styling Fonts and Text]] |
|
| |
|
| <center>[[web development|Back to Web Development]]</center> | | <center>[[web development|Back to Web Development]]</center> |
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 and Rule Declarations
Cascade and Rule Declarations
Styling Fonts and Text
Back to Web Development