CSS Container/Box

display

Note: there are more display types, particularly for IE browsers, but these will work in both browsers and should be all you need to get your design to work in all browsers.
  • inline | block | compact | none | inherit
  • .box {display:block; }
  • .box {display:inline; }
  • .box {display:compact; }
  • .box {display:none; }

Margin

  • Properties you can apply to CSS containers.
  • Shorthand tip: Most box properties can use shortcut syntax to specify top,bottom, left and right
  • [top & bottom] [left & right ]
  • { margin: 20px 10px; }
  • [top] [bottom]] [left & right ]
  • { padding: 1em 3em; }
  • top left right bottom
  • { padding: 20px 10px 2px 5px; }

border

  • #RRGGBB - Each digit uses values from 0-9 + A-F. All equal values make a shade of gray.
  • border-top-color | border-right-color | border-bottom-color | border-left-color
  • .box {border:solid 1px #CCCCCC; }
  • .border-black {border-color:#000000; }

border-style

  • none | solid | dashed | dotted | double | groove | ridge | inset | outset | hidden | inherit
  • border-right-style | border-bottom-style | border-left-style | border-top-style

border-width

  • border-width: number px | medium | thick | inherit
    border-right-width | border-bottom-width | border-left-width | border-top-width
  • .box {border-width:2px; }

border-color

  • border-right-color | border-bottom-color | border-left-color | border-top-color
  • .box {border-color:#FF0000; }

border-style

  • none | solid | dashed | dotted | double | groove | ridge | inset | outset | inherit
  • .box {border-style:dashed; }

outline

  • outline-color | outline-style | outline-width
  • {
    outline: #0000FF solid thin
    }