Difference between revisions of "Cascade Style Sheets"

Revision as of 10:50, 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

Contextual Selectors

Contextual selectors use more than one tag in the selector. The tag closest to the declaration is the targeted tag. The additional tag(s) state where the target tag must be located in the markup up in order for target tag to be affected. Contextual selectors have spaces between them.

Example: The p is targeted tag. Only p tags within div tags will be red.

div p {color:red;}

Contextual selector examples

<html>
<head>
	<title>Contextual Selector Example 1</title>
	<link href="style_sheets/contextual_selector_example_1.css" rel="stylesheet" type="text/css">
</head>
<body>

Child selectors

Write a rule so the target tag has to be a child of a specific tag.

p>em {color:green;}

Contextual Class Selectors

You can combine tag and class name to make a selector more specific.

The second line states any tags with "specialtext" class will be bold.

The third line states "specialtext" class must be within the context of p tag for rule to apply.

p { font-family: Helvetica, sans-serif; }
.specialtext { font-weight:bold; }
p.specialtext { color:red}

| Class Selector Example 0

You can further specify by adding more tags.

The fourth line states span tag within a paragraph with "specialtext" class will be italicized

p { font-family: Helvetica, sans-serif; }
.specialtext { font-weight:bold; }
p.specialtext { color:red}
p.specialtext span { font-style:italic; }

| Class Selector Example 1

Skipping the restrictions of hierarchy

The line states span tag can be a descendant of any tag with specialtext class

.specialtext span { color:blue; }

IDs

ID synax is similar to classes except a hash (#) symbol is used versus a class's period.

Difference between Classes & IDs

The ID can only be used once per page and a class may appear many times.

If you want to identify a unique piece of your page's markup use an ID.

If you want to apply rules to multiple tags in same page or many pages use a class.

Universal Selector

The asterisk (*) means anything so this rule means all text will be blue.

* { color:blue; }

Another use is as the inverse of a child selector. This rule means any em tag that is at least a grandchild of the p tag, but not a child, is selected.

p * em { font-weight:bold; }

Adjacent Sibling Selector

Rule selects a tag that follows a specific sibling tag. p48

Attribute Selector

Attribute selectors use the attributes of the tag. p48

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:

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
Em	em
Ex	ex
Percentage	%

Back to Web Development

@@ Line 215: / Line 215: @@
 Absolute value describes a real distance.
 Relative value compared to another.
+Absolute value chart:
 {| border="1" cellspacing="0" cellpadding="5" align="center"
@@ Line 239: / Line 241: @@
 |}
+Relative value chart:
+{| border="1" cellspacing="0" cellpadding="5" align="center"
+! Relative Value
+! Unit Abbreviation
+|-
+| Em
+| em
+|-
+| Ex
+| ex
+|-
+| Percentage
+| %
+|}
 <center>[[web development|Back to Web Development]]</center>