Difference between revisions of "Cascade Style Sheets"

Revision as of 16:02, 19 May 2008

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 and Rule Declarations

Styling Fonts and Text

Back to Web Development

@@ Line 29: / Line 29: @@
 [[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]]
 <center>[[web development|Back to Web Development]]</center>