Whew! I’ve been (re)learning CSS and have discovered a few newbie misconceptions of mine that had really held me back.

CSS = Cascading Style Sheets. In an ideal web app, the HTML defines the page structure, the CSS defines the presentation (look), and the JavaScript/jQuery defines the behavior.

Two tremendously useful resources I’ve found:

• The CSS Specification, in particular the CSS layout chapters, on The Box Model, The Visual Formatting Model, and The Visual Formatting Model Details. They’re fairly dense, but readable and will give you a valuable foundation.
• The CSS Reference, which gives the details of each of the attributes.

Now to the parts of CSS I was confused about:

• border-style default is none and border-width default is 0. So you have to set BOTH of those attributes to see a border. I had expected to have to set border-width, but was blindsided by the default border-style. so from now on it’s { border-width: 5px; border-style: solid; } for me.
• right is measured backward from the right side of the container. Almost every other layout system I’ve used measured right from the origin (the upper-left or bottom-left corner of whatever). I couldn’t make sense of the numerous examples that set right: 0; now I know that they are saying “the right side lines up with the right side of the container.”
• bottom is similarly measured upward from the bottom of the container. So bottom: 0; says “the bottom edge lines up with the bottom of the container.”

Now that I have these CSS basics through my head, layouts make a lot more sense to me.