Cascading Style Sheets (CSS)

Monday May 14, GTC West, Class P20

CSS Syntax

selector { property: value; }

Attaching CSS

<style>
@import url('styles.css');
</style>

CSS Selectors

tag
.class
#id

CSS Units

em for text
px for rest

Right Column

CSS Design Techniques: Font Properties

  • font-family
    • body { font-family: “Times New Roman”, garamond, serif, ;}
    • Specific font families
      Arial, Times New Roman, Garamond
    • Generic font families
      sans-serif, serif, cursive, monospace, fantasy
    • Just because you ask for a font doesn’t mean the user has it on their computer
  • font-weight
    • How bold is the text: From 100 to 900
    • Normal is 400
    • Bold is 700
    • Can also use 'bold', 'bolder', 'lighter'
    • Examples:
      b {font-weight: 700; }
      b {font-weight: bolder; }
  • font-size
    • Use 'em's
    • body { font-size: 1em; }
  • font-style
    • 'normal', 'italic' , 'oblique'
  • font-variant
    • 'small-caps' or 'normal'
  • font (combined)
    • h1 { font: italic 500 small-caps 1.5em Arial, Helvetica, sans-serif; }
    • font-size and font-family must always be used together as the last two values in the declaration