View
788
Download
0
Category
Tags:
Preview:
DESCRIPTION
This is a presentation that I put together to introduce style sheets to my website design class.
Citation preview
Cascading Style Sheets
Orientation
Benefits
Better type and layout control.
Less work
Smaller documents
More accessible sites
How Style Sheets Work
Start with an XHTML document
Write rules for how you want the document to look
Attach the rules to the XHTML document
Writing the Rules
selector {declaration: value;}
selector {declaration1: value;declaration2: value;declaration3: value;
}
Example Selector & Declaration
p {font-size: small;font-family: sans-serif;}
Providing Measurement
Values
{margin: 2em};
{margin: 2 em}; Incorrect!
Attaching Style Sheets
External Style Sheets
Embedded Style Sheets
Inline Style Sheets
Attaching Style Sheets
External Style Sheets - placed between the <head> tags.
<LINK REL=StyleSheet HREF=”mystyle.css" TYPE="text/css" MEDIA=screen>
Embedded Style Sheets
Inline Style Sheets
Attaching Style SheetsExternal Style Sheets
Embedded Style Sheets - placed between the <head> tags.
<style type=”text/css”>/* style rules go here */</style>
Inline Style Sheets
Attaching Style Sheets
External Style Sheets
Embedded Style Sheets
Inline Style Sheets - Placed within the tags themselves (Use only when absolutely necessary)
<h1 style=”color: red”>Introduction</h1>
InheritanceXHTML elements pass down certain properties to the elements they contain.
Original text uses the browser’s default styling. Ex:“Look at the stars!”
p {font-size: small; font-family:sans-serif;}“Look at the stars!”
Parents & Children
All of the h1, h2, p, em, and img elements are descendants of the body element.
They are the children of the body parent element.
Style Sheet Hierarchy
Browser Default Settings
User Style Setting set in a Browser
Linked external style sheet
Embedded Style Sheets
Inline Style Sheets
Box Model
Every element on the page is considered as being contained in a rectangular box.
Selectors can be grouped
h1, h2, p, em, img {border: 1px solid red;}
CSS Reference
http://www.w3.org/Style/CSS
http://www.css-discuss.org
http://www.csszengarden.com
http://www.cssbeauty.com
http://www.w3schools.com/CSS/CSS_reference.asp
Recommended