Cascading Style Sheets (CSS)

Attaching CSS

CSS Selectors

CSS Units

Right Column

CSS Design Techniques: Boxes

• Block vs. Inline Elements
  • Some elements make boxes naturally (block)
    • p, h1, h2, ul, ol, li, div,
  • Others do not (inline)
    • a, em,
• Can switch between default behavior:
  • a { display: block; }
  • p { display: inline; }
• All block elements are boxes and have margins, padding and border
  • border is the 'edge'
  • margin are outside
  • padding is inside
  • Example:
    
    #boxModel {
    border: 1px dotted black;
    background-color:#999999;
    margin: 10px;
    padding: 20px;
    }
• margin, padding shorthand
  • Top, Right, Bottom, Left
  • Example
    padding { 10px 0px 4px 2px; }
• borders
  • border-width, border-style, border-color
  • border (combined)
  • Example:
    body {
       border-style: solid dashed groove ridge;
       border-width: 1in 10px 5em 18px;
       border-color: red green purple blue;
    }
• Can also 'float' and be positioned...