2004.08.27 12:31 PM

CSS Pains

Creating, organizing, and correctly utilizing non-trivial CSS is a PITA, especially when you don't get to do it often enough to make it second nature. I'm getting my ass handed to me this week by some unaccounted for CSS style overlaps and incomplete inheritance considerations in my HTML. For instance, right now I'm staring at an <A> in a <DIV class="..."> in a <DIV id="..."> and seeing <A> fail to exhibit the characteristics I expect based on the #id, .class, and element styles I've defined. Grrr.

Having read the official explanation a dozen times today, I figured I would repeat the rules for calculating selector specificity here to improve my retention:

A selector's specificity is calculated as follows:
  • count the number of ID attributes in the selector (= a)
  • count the number of other attributes and pseudo-classes in the selector (= b)
  • count the number of element names in the selector (= c)
  • ignore pseudo-elements.

By the way, if you're using Mozilla/FireFox, there's a great extension called Web Developer that will show you the cumulative CSS in effect (selectors and properties) for an HTML element you visually select on the page. Priceless.

Finally, here's the complete list of CSS 2.1 properties, including allowable values, initial values, what they apply to, and whether they're inherited. I generally get into trouble with properties that are not inherited, so I've repeated them below for my own benefit:

  • background
  • background-attachment
  • background-color
  • background-image
  • background-position
  • background-repeat
  • border
  • border-color
  • border-style
  • border-top border-right border-bottom border-left
  • border-top-color border-right-color border-bottom-color border-left-color
  • border-top-style border-right-style border-bottom-style border-left-style
  • border-top-width border-right-width border-bottom-width border-left-width
  • border-width
  • bottom
  • clear
  • clip
  • content
  • counter-increment
  • counter-reset
  • cue
  • cue-after
  • cue-before
  • display
  • float
  • height
  • left
  • margin
  • margin-right margin-left
  • margin-top margin-bottom
  • max-height
  • max-width
  • min-height
  • min-width
  • outline
  • outline-color
  • outline-style
  • outline-width
  • overflow
  • padding
  • padding-top padding-right padding-bottom padding-left
  • page-break-after
  • page-break-before
  • pause
  • pause-after
  • pause-before
  • play-during
  • position
  • right
  • table-layout
  • top
  • unicode-bidi
  • vertical-align
  • width
  • z-index
  • text-decoration



TrackBack URL:  https://www.typepad.com/services/trackback/6a00d8341c7bd453ef00d8350756e753ef

Listed below are links to weblogs that reference CSS Pains: