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… ;)
DigWP
A book and blog co-authored by Jeff Starr and myself about the World's most popular publishing platform.
Quotes on Design
Design, like Art, can be an elusive word to define and an awfully fun thing to have opinions about.
HTML-Ipsum
One-click copy to clipboard access to Lorem Ipsum text that comes wrapped in a variety of HTML.
Bookshelf
Hey Chris, what books do you recommend? These, young fertile mind, these.