Friday, October 31, 2014

Week 9: CSS

1. W3 School Cascading Style Sheet Tutorial: http://www.w3schools.com/css/
2. CSS tutorial: starting with HTML + CSS http://www.w3.org/Style/Examples/011/firstcss
3. Lie, H. W. Bos, B. (1999). Chapter 2. In Cascading Style Sheets, Designing for the Web (2nd ed.). Indiana: Addison Wesley.

  • CSS
    • 1+ style sheet can influence doc. presentation
      • cascading: diff style sheets as series
    • brevity is a priority
      • short style sheets load faster
      • ++ opps for hand-coding
  • Create CSS either by 
    • hand-coding or 
    • using an editor
  • Hand-coding useful
    • to see how rules "work"
    • for more customization
  • rule: stylistic statement
    • H1 { color: green }
      • where H1: selector (which elements will be affected)
      • { color: green }: declaration (effect)
        •  color: property
        •  green: value
      • all selectors H1 will be declared the same color
  •  selectors can have 1+ declarations
    • H1 { color: green; font-style: bold; } 
  •  for CSS to take effect in  HTML,
    • place after <TITLE> but before <BODY> tags
    • also use CSS-capable browser 
      • <STYLE TYPE="text/css">  <-- declare value
      • <!--
        H1 { color: green; font-style: bold; }
        -->

  • inheritance
    • parent > child elements
    • BODY { color: black } will set all elements as white (unless otherwise stated) by
    • e.g. H1 { color: blue } where
      • everything but H1 will be in black
    •  other inheriting elements
      • font-style (weight); margin-top (bottom, left, right); padding
  • some properties don't inherit
    • BODY { background:url; }
  •  CSS font units
    • em: 1em = current font size
    • ex: 1ex = x-height of font (usu. 1/2 font size)
    • pt: 1pt = 1/72" font
    • pc: 1pc = 12 ps
    • px: pixels (dots on screen)
  •  Aural style sheets
    • combo of speech synthesis + sound effects
    • for ppl who are visually impaired
  •  navbar
    • after <BODY> tag
    • ul.navbar { declarations }
    • style w/ padding, margin, etc.

No comments:

Post a Comment