Difference between revisions of "Cascade Style Sheets"

Revision as of 15:59, 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

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%

Styling Fonts and Text

Back to Web Development

@@ Line 25: / Line 25: @@
 [[Adding Styles to Web pages]]
-== Pseudo Classes ==
+== Psuedo Elements and Classes ==
-Classes that cause rules to be applied when a specific event happens. These classes are not attached to tags in  markup. p50
+Psuedo Elements and Classes
-=== 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.
-<pre>x:first-child</pre>
-This rule selects the focus of the user with the name x.
-<pre>x:focus</pre>
-== 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.
-<pre>x:first-letter</pre>
-This rule selects the first line of tag name x and applies your style.
-<pre>x:first-line</pre>
-This rule adds specified text before an element of tag name x.
-<pre>x:before</pre>
-This rule adds specified text after an element of tag name x.
-<pre>x:after</pre>
-Example of x:before and x:after
-<pre>h1.age:before {content:"Age:"}
-h1.age:after {content:"years old."}
-Code <h1 class="age">36</h1> displays "Age: 36 years old."</pre>
 == Cascade ==