Here's a few pics of the evening.
|Justin describing CSS|
|Panorama of the crowd|
My unordered list of jumbled notes:
border: 10px solid blue; #order doesn't matter
border-bottom:... #only for the bottom
margin property can be negative.
"auto" centers element horizontally only.
line height specifies vertical distance between lines of text in container.
line-height: [number | length | % ]
display:block; # default width is 100%. Always on same line
display:inline; # width is only based on content. You cannot set a width on it. Can do margin-left and right, but not top and bottom.
display:inline-block; # may have width. operates like a magic block inside inline element. display:none; # hides the element and its space. triggers a reflow.
float:left; float:right; #pushes element left or right. Treated as "display: block" except you can set the width.
clear: left #
clear: both #
visibility: hidden; #like display:none, but does not cause a reflow, keeps its place
position: static; # default, puts the element in the flow
position:relative; #moves element, but does not reflow
position: absolute; # positioned from positioned-ancestor with things like "top: 200px"
position: fixed; # takes it out of the flow, positioned in viewport
top, right, bottom left, only works for positioned elements
z-index # determines the depth position of stacked elements, only works for positioned elements, ie, not "position:static".
to center vertically:
position:absolute; top:50%; margin-top:10px;
left: -25px; # only on positioned elements
Justin did mention that most developers never sit down to learn CSS, we just learn tiny bits as needed. I feel the same way, so it was great to get a full 2 hour overview of how positioning really works.