Chap 6 - Cascading Style Sheets

Anatomy of a style sheet

• h1 { color: green; }
  • h1 - selector
  • { color: green; } - rule
  • color: green; - declaration
  • color - property
  • green - value
• You can have more than one value within a rule

Types of Style Sheets

• Embedded
  • styles are within the same page
  • use the <style> tag set to enclose the styles
  • should only be used on styles specific to that page
  • if all layout is done on that page - it will make it difficult change between the sites
• External Style Sheets
  • external files
  • same file can be used by several other files
  • makes it easy to make wholesale changes to a site
• Inline Styles
  • Should avoid using
  • potential to be deprecated in future versions of xhtml specification
  • use a embedded class preferably

CSS Selector Types

• type/tag
  • redefine the style of an xhtml tag
  • ex: p { }
• id
  • ID selectors used to redefine a specific element on a web page
  • ex: #header { }
• class
  • used to redefine (potentially) multiple elements on a web page, but not all of the elements of the same type/tag
  • can be mix/matched with different types of tags
  • ex: .required { }
• pseudo-class
  • style an element at a given state
  • ex: a:hover { }