How Style Sheets Work

1,084 views

Published on

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

Published in: Technology, Education
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,084
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
33
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

How Style Sheets Work

  1. 1. Cascading Style Sheets Orientation
  2. 2. Benefits <ul><li>Better type and layout control. </li></ul><ul><li>Less work </li></ul><ul><li>Smaller documents </li></ul><ul><li>More accessible sites </li></ul>
  3. 3. How Style Sheets Work <ul><li>Start with an XHTML document </li></ul><ul><li>Write rules for how you want the document to look </li></ul><ul><li>Attach the rules to the XHTML document </li></ul>
  4. 4. Writing the Rules <ul><li>selector {declaration: value;} </li></ul><ul><li>selector { declaration1: value; declaration2: value; declaration3: value; } </li></ul>
  5. 5. Example Selector & Declaration <ul><li>p { font-size: small; font-family: sans-serif; } </li></ul>
  6. 6. Providing Measurement Values <ul><li>{margin: 2em}; </li></ul><ul><li>{margin: 2 em}; Incorrect! </li></ul>
  7. 7. Attaching Style Sheets <ul><li>External Style Sheets </li></ul><ul><li>Embedded Style Sheets </li></ul><ul><li>Inline Style Sheets </li></ul>
  8. 8. Attaching Style Sheets <ul><li>External Style Sheets - placed between the <head> tags. <LINK REL=StyleSheet HREF=”mystyle.css&quot; TYPE=&quot;text/css&quot; MEDIA=screen> </li></ul><ul><li>Embedded Style Sheets </li></ul><ul><li>Inline Style Sheets </li></ul>
  9. 9. Attaching Style Sheets <ul><li>External Style Sheets </li></ul><ul><li>Embedded Style Sheets - placed between the <head> tags. <style type=”text/css”> /* style rules go here */ </style> </li></ul><ul><li>Inline Style Sheets </li></ul>
  10. 10. Attaching Style Sheets <ul><li>External Style Sheets </li></ul><ul><li>Embedded Style Sheets </li></ul><ul><li>Inline Style Sheets - Placed within the tags themselves (Use only when absolutely necessary) <h1 style=”color: red”>Introduction</h1> </li></ul>
  11. 11. Inheritance <ul><li>XHTML elements pass down certain properties to the elements they contain. </li></ul><ul><li>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!” </li></ul>
  12. 12. Parents & Children <ul><li>All of the h1, h2, p, em, and img elements are descendants of the body element. </li></ul><ul><li>They are the children of the body parent element. </li></ul>
  13. 13. Style Sheet Hierarchy <ul><li>Browser Default Settings </li></ul><ul><li>User Style Setting set in a Browser </li></ul><ul><li>Linked external style sheet </li></ul><ul><li>Embedded Style Sheets </li></ul><ul><li>Inline Style Sheets </li></ul>
  14. 14. Box Model <ul><li>Every element on the page is considered as being contained in a rectangular box. </li></ul>
  15. 15. Selectors can be grouped <ul><li>h1, h2, p, em, img {border: 1px solid red;} </li></ul>
  16. 16. CSS Reference <ul><li>http://www.w3.org/Style/CSS </li></ul><ul><li>http://www.css-discuss.org </li></ul><ul><li>http://www.csszengarden.com </li></ul><ul><li>http://www.cssbeauty.com </li></ul><ul><li>http://www.w3schools.com/CSS/CSS_reference.asp </li></ul>

×