My Newbie CSS mistakes

CSS 3 badge
CSS 3 badge

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:

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.