• Purpose
    • To keep presentation separate from content
    • Define style in stylesheets rather than inline styles
    • Inline Styles <div style="font-weight:bold;">
  • Rule
    • selector { property: value; }
  • Id based selector
    • Selects a single element
    • #content { width: 200px; }
  • Class based selector
    • Selects multiple elements that belong to the class
    • .info { text-align: center; }
  • Tag based selector
    • Selects all the tags
    • div { width: 200px; }
  • Multiple selectors
    • Selects multiple elements of different types
    • h1, .info, #content { width: 200px; }
  • Descendent Selectors
    • Selects descendents, not necessarily children. Separated by space.
    • div p { width: 200px; }
  • Relationship Selectors
    • Child, Sibling etc
  • Pseudo Selectors
    • selector:psedo-class
    • first-child link hover etc
  • Normal Flow
    • Top to bottom; Left to right;
  • Types of CSS Values
    • Words text-align: center;
    • Numerics font-size: 12px;
    • Color Values color: #3636
  • CSS Styling Categories
    • Positioning and Layout
    • Background
    • Font and text
    • Links
    • Lists
    • Table
  • Position
    • position:static - Default. Static Elements have no offset value like left, right, top, bottom
    • position:relative - Similar to static. Can adjust to offset values
  • Display
    • display:inline
    • display:block
    • display:none
  • Float
    • float:left
    • float:right
    • float:none
  • Fonts
    • font-family: Helvetica, Arial, "Lucida Grande", sans-serif;
    • Browser checks for availability from left to right
    • font-weight:
  • Preprocessing Tools
    • Less
    • SASS
    • Stylus
    • Ability to define variables. ( Variables made their way into the standard)