People Share Their CSS “Ah-ha!” Moments
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
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 …
… multiple classes !!
Like daniel, multiple classes (input class=”bordr mndtry”) and child classes, like styling #menu links differently from #main links.
The realization that I could get rid of the default (ugly) link styling and apply my own!
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
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.
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}
Realizing you can put multiple classes on things… ;)