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:

<a href="google.com">Google</a>

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

Related Articles:

Post Footer automatically generated by Add Post Footer Plugin for wordpress.

About Ryan Rauh

My name is Ryan Rauh and I like shiny things. If I've seen it on twitter more the twice most likely I've looked at it or tried it. I really like memes and other silly and seemingly useless things out on the internet. I blog about things *I* think are cool and interesting, I hope you will find them cool and interesting too.
This entry was posted in CSS. Bookmark the permalink. Follow any comments here with the RSS feed for this post.
  • Simon Bartlett

    Do you notice that on each li element you have 7px on each edge that isn’t clickable?

    If you wanted to change this, you’d need to remove the padding from the li elements, and apply it to the a elements instead. :)

    • Anonymous

      I didn’t notice that. Thanks!

    • Anonymous

      Fixed

  • Mario Pareja

    Thanks for mentioning this book. I too am pretty clueless about CSS and in need of a book to get to a deeper level of understanding. Most books I see are busy with the quirks and don’t really (as far as I can tell) present idiomatic ways of applying CSS. Hope you keep up with periodic posts about the book so I can gauge if it is what I’m looking for!

  • http://josephvano.wordpress.com/ Joey Vano

    Cederholm is the man ….

    Know your inline vs. blocks!