• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
How Style Sheets Work
 

How Style Sheets Work

on

  • 1,193 views

This is a presentation that I put together to introduce style sheets to my website design class.

This is a presentation that I put together to introduce style sheets to my website design class.

Statistics

Views

Total Views
1,193
Views on SlideShare
1,193
Embed Views
0

Actions

Likes
2
Downloads
29
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    How Style Sheets Work How Style Sheets Work Presentation Transcript

    • 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&quot; TYPE=&quot;text/css&quot; MEDIA=screen>
      • Embedded Style Sheets
      • Inline Style Sheets
    • Attaching Style Sheets
      • External 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>
    • Inheritance
      • XHTML 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