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

Selectors

Adding Styles to Web pages

Three ways to add styles to your pages.

Inline

Add to a tag using style attribute

<p style="enter CSS"></p>

Embedded

Add styles in the head of XHTML document

<style type="text/css">enter CSS</style>

Linked

Style is in another document and the markup is linked to the style.

<link href="style_sheet.css" media="screen" rel="stylesheet" type="text/CSS" />

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:

1. Find all declarations that apply to each element and property
2. Sort by order and weight
3. Sort by specificity
4. 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:

1. Words
2. Numerical values
3. 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:

1. Absolute
2. 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