Grow your CSS skills. Land your dream job.

People Share Their CSS “Ah-ha!” Moments

Published by Chris Coyier

A few weeks ago I shared my CSS "Ah-ha!" Moment and asked others to share theirs. It was lots of fun hearing what those moments were for people. I wasn't surprised to hear the CSS Zen Garden come up very often, as that was a huge eye-opener for me and countless others I'm sure. I was surprised to hear how many people specifically brought up floats. I'm thinking about doing an in-depth article on that, since I don't think I ever have.

"...realizing you could style the contents of a box differently to the rest of the page" - Rob Lang

"Must have been in 2002 or 2003, I think. I saw the power of CSS and it's awesome possibilities in the CSS Zen Garden." - Oliver

"My CSS 'Ah-Ha!', as simple as it might sound, came from understanding that the BROWSER applies IT'S style first and so any CSS you are applying will essentially override those rules" - David Huntley

"Mine was first time I installed Firebug ..." - Francisco

"... the time I figured out ... the difference between block and inline elements ..." - survivor

"... cracking open html.css (the Firefox CSS file) and realizing how a browser works." - Tim Wright

"... realizing that I could use images for any page element... " - Bob

"When I finally truly figured out how to get my floats to do what I want in ALL browsers." - Lindsey

"For me it was when I got my head around the Box Model." - liam

"... something like ohhh THAT is what clear:both is for." - V1

"My Ah-ha! moment was realizing that position:relative on a particular div will allow you position:absolute any element inside that div ..." - gaga

"The realization of how floats really work. Suddenly, using tables for layout seemed so 90's." - Erik Brännström

"... the first time I discovered I didn't have to use javascript OnMouseOver." - Jay

"understanding that there is a "normal flow" - Serge

... figuring out how parent styles applied to children ... - Heidi

Comments

  1. Audrey Viviana

    for someone who is self-taught in this web design/development stuff, i’d like to add that my ah-ha! moment was went i discovered Firefox two yrs ago and realised that it was compliant unlike IE …

    that really helped make the development process tick correctly …

  2. … multiple classes !!

  3. Niobe

    Like daniel, multiple classes (input class=”bordr mndtry”) and child classes, like styling #menu links differently from #main links.

  4. William
    Permalink to comment#

    The realization that I could get rid of the default (ugly) link styling and apply my own!

  5. My first ‘Ah-ha’ moment was when I discovered (back in 2001) that CSS was the way to go to separate a site’s content/semantics from it’s presentation. I built my first site with Golive and I just couldn’t believe my eyes when I looked at the bloated & inefficient code it produced.

    My second enlightment was – as for many others I believe- the Zen Gardens: their beautiful and inspiring examples proved it actually could be done with CSS. I’m more of a programmer then a designer, but I’ve learned quite a lot there.

    And while we’re at it: thanks Chris for all your time and effort to make this site a worthwhile place to visit frequently.

    Regards,
    Ed

  6. My CSS “Ah-ha” moment came when I downloaded a simple guest book for my sidebar. I noticed it had a nice background color (which I knew how to do at the time), what introduced me to css was .box { border: 1px solid #FFFFFF } I needed to know desperately what was making the border.

  7. Permalink to comment#

    One of my CSS “Ah-ha” moments came when I started picturing a box, beginning at the top, flowing clockwise; to help me remember CSS shorthand values’ order.

    .class{margin:top right bottom left}

  8. Permalink to comment#

    Realizing you can put multiple classes on things… ;)

Leave a Comment

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".