Ah Ha Moments – Handcrafted CSS Chapter 1


I recently started reading Handcrafted CSS by Dan Cederholm (just want to add that I am not being paid to blog about this book, it’s amazing, go buy it). I just finished chapter 1 and there are a few Ah Ha! moments I want to share. Most of these are uninteresting to your seasoned CSS cowboy. For me it brings a greater understanding of CSS and a sharper tool in my toolbox.

Ah Ha Moment #1: a { display:block; }

Your classic anchor tag:

The anchor tag is an inline element, which 99% of the time is what you want. Think about that 1% of the time when you want an anchor tag to make the entire element clickable.

Hover over each of the list items above and notice how only the link text is clickable (embedded jsfiddle, sorry google reader fans). That’s a total fail, I want the whole <li> to be clickable. No worries it easy to fix!

display_block

Notice how the entire <li> is now clickable.

Awesome right? I think so,

-Ryan

Joining Los Techies!