Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Chapter 02

642 views

Published on

CSS: The Missing Manual, Chapter 2

Published in: Design, Technology, Education
  • Be the first to comment

  • Be the first to like this

Chapter 02

  1. 1. Chapter 2 Creating Styles and Style Sheets Source: CSS | The Missing Manual Copyright 2009
  2. 2. Anatomy of a Style <ul><li>A single style is just a rule that tells a Web browser how to format something on a Web page </li></ul><ul><li>A style is made up of two elements </li></ul><ul><ul><li>selector – a Web page element that the browser formats </li></ul></ul><ul><ul><li>declaration block – the actual formatting instructions </li></ul></ul>Source: CSS | The Missing Manual Copyright 2009 Chapter 2
  3. 3. Anatomy of a Style <ul><li>selectors covered in detail in Chapter 3 </li></ul><ul><li>style = rule </li></ul><ul><ul><li>generally interchangeable terms </li></ul></ul><ul><li>declaration block appears between opening and closing braces { } </li></ul><ul><li>every declaration has two parts </li></ul><ul><ul><li>property </li></ul></ul><ul><ul><li>value </li></ul></ul>Source: CSS | The Missing Manual Copyright 2009 Chapter 2
  4. 4. Anatomy of a Style <ul><li>Example: </li></ul><ul><ul><li>p { </li></ul></ul><ul><ul><li>color: red; </li></ul></ul><ul><ul><li>} </li></ul></ul>Source: CSS | The Missing Manual Copyright 2009 Chapter 2 selector declaration property value
  5. 5. Understanding Style Sheets <ul><li>A collection of CSS styles comprises a style sheet </li></ul><ul><li>Two types of style sheets: </li></ul><ul><ul><li>internal </li></ul></ul><ul><ul><ul><li>inline (used in HTML mail) </li></ul></ul></ul><ul><ul><ul><li>embedded </li></ul></ul></ul><ul><ul><li>external </li></ul></ul><ul><ul><ul><li>using <link> tag </li></ul></ul></ul><ul><ul><ul><li>using @import directive </li></ul></ul></ul>Source: CSS | The Missing Manual Copyright 2009 Chapter 2
  6. 6. Understanding Style Sheets <ul><li>When a Web browser downloads an external style sheet, it stores the file in a behind-the-scenes folder referred to as cache . </li></ul><ul><li>When the visitor navigates to other pages on the site there is no need for the browser to download the style sheet again. </li></ul>Source: CSS | The Missing Manual Copyright 2009 Chapter 2
  7. 7. Understanding Style Sheets <ul><li>May have to clear cache occasionally when continuously editing and previewing Web pages using external style sheets </li></ul><ul><li>Google: “clearing cache” </li></ul><ul><ul><li>Firefox </li></ul></ul><ul><ul><li>Safari </li></ul></ul><ul><ul><li>Internet Explorer </li></ul></ul>Source: CSS | The Missing Manual Copyright 2009 Chapter 2
  8. 8. Internal Style Sheets <ul><li><style> tags appear within the <head> tags </li></ul><ul><li>must add the type attribute </li></ul><ul><ul><li><style type=“text/css”> </li></ul></ul><ul><li><style> tag is HTML, not CSS </li></ul>Source: CSS | The Missing Manual Copyright 2009 Chapter 2
  9. 9. Internal Style Sheets <ul><li>internal sometimes referred to as embedded to distinguish it from inline </li></ul><ul><li><style> tags appear within the <head> tags </li></ul><ul><li>must add the type attribute </li></ul><ul><ul><li><style type=“text/css”> </li></ul></ul><ul><li><style> tag is HTML, not CSS </li></ul>Source: CSS | The Missing Manual Copyright 2009 Chapter 2
  10. 10. Internal Style Sheets <ul><li>Example: </li></ul><ul><ul><li><style type=“text/css”> </li></ul></ul><ul><ul><li>p { </li></ul></ul><ul><ul><li>color: red; </li></ul></ul><ul><ul><li>} </li></ul></ul><ul><ul><li></style> </li></ul></ul>Source: CSS | The Missing Manual Copyright 2009 Chapter 2
  11. 11. External Style Sheets <ul><li>Nothing more than a text file (with a .css extension) containing CSS rules </li></ul><ul><li>It never contains HTML code </li></ul><ul><li>Therefore, an external style sheet NEVER contains a <style> tag, or any other HTML tag </li></ul>Source: CSS | The Missing Manual Copyright 2009 Chapter 2
  12. 12. External Style Sheets <ul><li>You can attach a style sheet to a Web page using one of two methods </li></ul><ul><ul><li><link> tag </li></ul></ul><ul><ul><li>@import directive </li></ul></ul><ul><li>All current Web browsers treat these two techniques the same </li></ul>Source: CSS | The Missing Manual Copyright 2009 Chapter 2
  13. 13. External Style Sheets <ul><li>@import can do one thing <link> cannot: </li></ul><ul><ul><li>attach an external style sheet to another external style sheet </li></ul></ul><ul><ul><li>advanced technique </li></ul></ul><ul><li>Note: <link> is a single-sided tag that needs to be closed to be XHTML valid </li></ul><ul><ul><li><link /> </li></ul></ul>Source: CSS | The Missing Manual Copyright 2009 Chapter 2
  14. 14. External Style Sheets <ul><li><link> tag requires three attributes: </li></ul><ul><ul><li>rel – indicates the type of link (to a style sheet) </li></ul></ul><ul><ul><li>type – indicates type of data (text file containing CSS) </li></ul></ul><ul><ul><li>href – points to the location of the CSS file </li></ul></ul>Source: CSS | The Missing Manual Copyright 2009 Chapter 2
  15. 15. External Style Sheets <ul><li>Example <link> : </li></ul><ul><ul><li><link rel=“stylesheet” type=“text/css” href=“css/global.css” /> </li></ul></ul><ul><li>Preference: <link> </li></ul>Source: CSS | The Missing Manual Copyright 2009 Chapter 2
  16. 16. External Style Sheets <ul><li>@import directive is used inside of a <style> tag </li></ul><ul><li>Example @import : </li></ul><ul><ul><li><style type=“text/css”> </li></ul></ul><ul><ul><li>@import url(css/global.css); </li></ul></ul><ul><ul><li></style> </li></ul></ul><ul><li>Note: quotes around URL are optional </li></ul><ul><ul><li>“ css/global.css” </li></ul></ul>Source: CSS | The Missing Manual Copyright 2009 Chapter 2
  17. 17. External Style Sheets <ul><li>Can you use more than one technique in a Web page? </li></ul><ul><ul><li>internal </li></ul></ul><ul><ul><ul><li>inline (used in HTML mail) </li></ul></ul></ul><ul><ul><ul><li>embedded (using <style> tag) </li></ul></ul></ul><ul><ul><li>external </li></ul></ul><ul><ul><ul><li>using <link> tag </li></ul></ul></ul><ul><ul><ul><li>using @import directive </li></ul></ul></ul>Source: CSS | The Missing Manual Copyright 2009 Chapter 2
  18. 18. External Style Sheets <ul><li>Answer: Yes </li></ul><ul><ul><li>discussion of “cascade” in Chapter 5 </li></ul></ul>Source: CSS | The Missing Manual Copyright 2009 Chapter 2
  19. 19. Tutorial: Creating Your First Styles <ul><li>Create fictitious Web site CosmoFarmer.com </li></ul><ul><ul><li>open chapter_02/basic.html </li></ul></ul><ul><ul><li>create an inline style </li></ul></ul><ul><ul><li>create an internal (embedded) style sheet </li></ul></ul><ul><ul><li>create an external style sheet </li></ul></ul>Source: CSS | The Missing Manual Copyright 2009 Chapter 2

×