Today I did Codecademy’s HTML & CSS course.  Even though I know the CSS syntax it is interesting how my pages are still pretty ugly.  I guess that’s why designers get paid.  

I learned a mnemonic device for the CSS box model Margin, Border, Padding, Content (Mac Book Pro).

Another important concept is positioning:

-Display property/command controls how much of the page the elements take up.  These are the accepted values for display:  

  • Block: blocks anything beside it.
  • Inline-Block: will allow other elements beside it.
  • Inline: Squishes elements together (headers and paragraphs)
  • None: Prevents the page from displaying the selected element.

-Float property/command determines where the element goes on the page.  The accepted values are Right or Left.

-Clear property/command helps non floating elements get out of the way of floating elements.  The accepted values are Right, Left, and Both.

-Position property/command is an advanced positioning command.  Its values are:

  • Absolute: is positioning in relation to first parent element that doesn’t have the default position static.  If there is no such element it will placed relative to html tag.
  • Relative: is positioning relative to where it would have landed if it had the default static positioning.  Relative position in the parent element allows for absolute position of child elements within the parent.  Think of child button elements (Close, Home, Signup, Back to Top).
  • Fixed: anchors an element to the browser window (good for navbars)
  • Static: is the default positioning which is where the element would normally go if positioning was not specified.