I think it’s different for everyone. That moment while you are beginner with CSS when something clicks. You just start to get it. That is your CSS “Ah-ha!” moment. You might not instantly become a CSS master, but from this point forward, there is no going back.
Because everyone enters the field of web design with different backgrounds and under different circumstances, I think the “Ah-ha!” moment is different for everyone. A true beginner with no web design experience at all might watch all the underlines on the links on their page disappear with a single CSS statement and be hooked. A seasoned veteran of web design coming from an environment where they were responsible for layout changes in complicated table-based systems might marvel at the ease of a CSS based structure and be hooked.
More likely though, it is something much smaller which causes the spark. It is one small little victory, your “Ah-ha!” that feels so good that you are hooked. (Sounds kind of like heroin when I say it like that, but you know what I mean).
If you have one, I am hoping that you will share! But for now, I can explain mine.
For me, it was a couple of concepts that felt like an unlocking of real power. It was a combination of these concepts that were my “Ah-ha!” moment.
- Every page element is a box.
- I can control the size and position of those boxes.
- I can give those boxes background images.
Sounds simple, but those things still feel powerful for me today.
If any of you folks remember your “Ah-ha!” moment, feel free to share them by sending them in or commenting below. I’d love to do another post on this and share other people’s moments.
Mine was realising you could style the contents of a box differently to the rest of the page:
.myDivClass li { special style for list items in .myDivClass }
Hey Chris!
True! True! I can even remember my very first CSS-“Ah-ha!” moment today…
Must have been in 2003 or 2003, I think. I saw the power of CSS and it’s awsome possibilities in the CSS Zen Garden.
From that moment on I knew that tables are so much 90’s stuff. But the whole CSS Code and the “new” html markup looked like totally new language to me.
A few weeks later I finished my first HTML /CSS based layout and was happy as a kid ordering his first Coke in a new learned language.
“Hey look there! The image is below the link text! And I, yes I created this page!”
I think that was my “Ah-ha!”-moment.
And I still have these moments today, when I get to know another great possibility of working with CSS.
Love it!
All the best from germany,
Oliver
blog.addictedtocoffee.de
Mine was first time I installed Firebug and realised different colors for margins, paddings, etc. Next I started to use different CSS selectors and everything became really easy!!!
My AHA moment was at the time I figured out the boxmodel and the difference between block and inline elements… It made my life a lot easier…
Also, the first time I made an IMG replacement with CSS.
Mine was when I turned off the stylesheet of a web site and saw that it turned completely in black text over white background: There I realized how much CSS controls the graphic appearence of a website, without affecting the content
My two lines of bliss:
Mine was after cracking open html.css (the Firefox CSS file) and realizing how a browser works.
Seeing things like:
Really opened my eyes and made me realize that we can make things look however we want, and just because we think a table should look like a traditional table, doesn’t mean it has to; and we have total control over presentation of the HTML.
Since then, things like:
have been very useful for me when creating quick tutorials.
The hidden power of CSS manipulation :o)
Love it! Great post, looking forward to seeing everyone’s “ah-ha” moments
I had many little AhHa moments over the years…and they keep coming. Maybe I’m a slow learner or maybe I just never stop learning (I prefer to think the second).
My most recent AhHa moment was realizing that I could use images for any page element while not upsetting my alter-ego: “Standards-Compliant Guy”. I now feel so much more powerful replacing anchors, heading tags divs, menu items, or anything else with a CSS background image knowing that my UGLY and standards compliant HTML is underneath, just waiting for that screenreader and Googlebot to come along and read it without any issues.
This AhHa is opening up my design side to be more creative and less afraid of what I can and can’t do in my designs…
Mine was when I finally got that this works, and can still add stuff to these classes individually later. It clicked and started some strange process in my brain that finally got me to figure out inheritence too.
.class, .anotherclass, .anotherone {
…
}
My greatest “Ah-ha!”-moment was when I realised how you could use the same markup, and then thanks to CSS make it all look different for the end-user. For that particulary moment, I would like to give my thanks to CSS Zengarden.
When I finally truly figured out how to get my floats to do what I want in ALL browsers.
And I still have “ah-ha” moments ALL the time. When I get a new client with a particular design that I KNOW can be done and I get it to do exactly what I want (in all browsers), I feel like doing a little dance… :)
Mine was realising that you can apply more than one class to one item.
For me it was when I got my head around the Box Model. Margins, borders & padding… Ah ha! Sort of happened without me realising. But ever since then I’ve viewed CSS differently.
Mine was the multi class applications, the ease of use. My worst moment was 2 seconds later when I realised I still have to fight cross browser issues ;)
When I figured out floats way back in the day.
And then text-indent: -9999em
My “ah-ha†moment was to realize how margin collapsing works. I always cursed on this
#masthead h1 {margin-top: 30px;
}
Shifting my whole page with #masthead background.
The other one was similar to Tim Wright’s moment – forms.css in Firefox.
I first read about and learned CSS from the Lie+Bert book “Cascading Style Sheet: Design for the Web”, my ah-ha moments was when they demonstrate the power of the users over the designers, and apply CSS to XML.
Now I’m still an user rather than designer, but such power and Firebug help me a lot in using the web.
@Tim Wright: interesting, I presumed every browser hardcoded the default HTML rendering in native code.
I’m still in the beginning stages of learning, but I think i’ve been getting a pretty good grasp of on css very quickly. I think it first started after I got the “Hands On Training on CSS with Eric Meyer” by Lynda.com book and it all started to make more sense to me.
I think my first real “Ah-Ha” moment was when I figured out CSS image replacement (sprites) and did my first nav menu using that technique.
And now after reading the comments, another “Ah-Ha” moment is realizing that you can use image replacement for everything!
Mine was much like Lindsey’s. Once I got a firm grasp of floats and clearing, I was ready for prime time. Once CSS “hits you,” it’s really not a difficult language at all.
For me, the big aha moment came with a simple float tag. A small little something, nothing really, but I WANTED that stuff to stay over on the right side where it belonged and couldn’t make it happen. It was that simple. Still seems kind of goofy, but it was the first time that I had actually added something to an existing sheet instead of simply playing with what already existed.
E
mine must have been.. something like ohhh THAT is what clear:both is for
mine big AH HA moment was that I havent had my big AH HA moment yet….
Sorry for my english : i’m a french of 29 years :)
Css is a very large world.
What i like in css, it’s the fact that you can change all your presentation with a powerful code.
But what is hard in css , it’s to learn priority of element, and to find the best choice cross-browser.I think it’s the big point for me, the portability.
After there is positionning things the way you want, and let place for other stuffs to be free to be place here or here…
A part of this wonderful world is visible into the css zen garden list of crazy and beautiful design.
I hope the standard will not move too much and do like php, going better with new name function, and new vocabulary to learn.
So, i’ve been playing css for 10 years, and sometime i feel lazy to take a paper and draw a window with a website design, so i start with tag table, tr, td and a little bit after i re-draw all in css optimizing things and as much as i can reduce the code….
I like the feeling to play with code css, php, …ajax
A stuff i like in css is to use div with overflow:auto and float:left, i think are some very powerful code.
my Ah-ha! moments was realizing that position:relative on a particular div will allow you position:absolute any element inside that div and body IDs. BTW, great site! I used your rollover technique on a site recently.
When I was about 12, I was doing a lot of coding in HTML so I had to give everything an individual style. When I was about 14 I started to hear about CSS and I when searching for sites to help but found my self confused and not until 6 months ago did I try to play with some more CSS, I wanted to change some stuff in my WordPress theme and since then I can’t stop myself, I finally had my moment when I realise that CSS was my style sheet and I could do what ever I wanted to do. Then I came across the CSS-Tricks podcast and I decided to build my own WordPress theme from scratch not to use on my site but to see if I can do it and I have spent 3 days so far in my spare time and I have 1 or 2 things to finish and it will be done. When I finally understood that everything could have a unique style and were in box I finally understood it.
My “ah-ha!” moment? Easy.
I still hadn’t quite grasped the concept of CSS… was kind of just putting around in it one night… and then it hit me:
I had just created a 3-column layout, fluid center, 3 different backgrounds. I wasn’t even paying attention to the importance of what I had done as far as my skills, I was just trying to crank it out for my client! LOL!
I had many Ah-ha moments, but currently I can remember discovering CSS sprites technique, position relative + absolute, floating, display:block on anchor elements, CSS global reset, … Every project that I’ve worked on have something new to discover, new technique, new shortcut, server-side script, …
Most recently (although not completely CSS), CSS3 nth-child pseudo class + jQuery for zebra striping :) – I knew that I could do it with JS (saw ALA article) and was so happy to see it work like a charm :)
I had a few.
.margin:whatever and
_margin:whatever for IE hacks. I hate using them.. but sometimes theyre just necessary and they make life easier.
descendant selectors
more complicated selectors (then the let down that IE doesnt support them).
the box model.
and more recently in a way has been finding ways to cut down elements and specific names in the mark up. trying to use the least amount of xhtml to get the effect while being semantic.
and of course.. what should be in everybodys Ah-ha moment.
text-indent:-9999px;
Yes, CSS Zen Garden, and realizing what you can do to good markup code.
I know what you’re talking about. I also had various moments like that when I redesigned my blog and created my own theme. It required a lot of learning. EVERY PAGE ELEMENT IS A BOX. That’s something I wasn’t aware of. At least not fully and I now understand the power of it!
Thanks for this great post!
The realization of how floats really work. Suddenly, using tables for layout seemed so 90s.
My greatest ah-ha moment was when I finally realized how I could design a whole page without tables and frames, with just CSS. When I really understood how powerful CSS is.
Another small one was when I saw the “margin:0 auto;”-trick for centering elements. I also had one when I understood how CSS sprites work. And when I understood the CSS selectors and I didn’t need to give every element a class or id.
Clearly remember my 2 moments years ago – relative vs. absolute and block vs. inline. Then there was the first time I discovered I didn’t have to use javascript OnMouseOver. Then there was the time just yesterday…
My first was way back at the start, when I worked how “.” and “#” where different.
overflow:hidden;clear:both;
my ah-ha moment was when I finally understood how floats work. Well, it’s more like a “wait..what??” Moment, because every now and then I have to review the information, and learn something new about floats.
Dang floats!
I’m so new, a couple of tiny little (tab links are working) ah’s are dulled by mostly args & 404 error pages. Do recall my first hello worlds years back with html.
the epiphany of background image replacement:
#home h1 {
text-indent:-9999px;
background: url(fancygraphic.gif) no-repeat top left;
width: 300px;
height: 50px;
}
it was when i came to use firebug for the first time.. :)
i had a few:
getting rid of “classitis” (using #nav li instead of .list-item)
writing simple semantic html for the first time and do whatever i want with it
learning floats
understanding that there is a “normal flow”
height:1%
For me, it was really getting the way layout in CSS works, so the box model, positioning, floating, margins and paddings and knowing how they work and cooperate together (and when they don’t).
Definitely a recognisable article, cheers!
Mine, like several other people above, was CSS Zen Garden. Just the realisation that a whole site can be completely transformed from a single (or collection of) CSS file(s) was enough to drive what’s been several years of learning, practising and loving CSS.
Long live the Zen Garden!
I’m a bit geekier than the rest, I think. My first ah-ha was figuring out how parent styles applied to children, and then how to define style in nested elements, like #nav ul li ul li. My most recent ah-ha was discovering how to use one big image that contained all my bullet image replacements by coding an absolute position for the image in the li.
I have a feeling this will be a very long comment list! :) I’ve even learned something by reading everyone else’s moments — thanks @gaga (#24)!
One of mine was when I learned the difference between inline and block.
My ah-ha moment was years ago when I discovered that I could use CSS to style fonts, I remember being really impressed that I could set the line height. I haven’t used the font tag since then. Divs came soon after. :)
I remember finding css codes on the web for styling the cursor and the scrollbar….a long time ago :)
I had many of them. But discovering how clear:both works was the best. I used to have a tough time aligning elements.
while all of these were ah-ahs for me at some point in time. My biggest was that you can not name css elements with numbers. i.e. #960wrapper {}
When realizing I could change the font through out the whole 200 pages in my site with a click. Just around 1999-2000.
Reading these comments and saying “ah-ha”
positioning a box absolutely inside a relative positioned box…
I have to agree with Rob, (and not coz he has a great name), when I realised that you could style elements within divs that was awesome.
though i’m only css beginner and don’t know most of things, I’d say one of a-ha moments for me was:
background:fixed;I just love that effect.
One of mine was when I learned the difference between inline and block.
I liked the moment when I discovered that I could put two classes in the same div-class :
div class="firstclass second class"
Mine was a long time ago when I realized that you could change the colours of links and change their rollover state with a:link and a:hover etc.
“Every page element is a box.”
That was the big one for me as well. I’m really enjoying your vids…awesome stuff Chris!
the first and more important when i could undertand the “div” element as an divition of the page that isnt only hirzontal fullwidth
the second (even more engaging)
when i finally could make a
ul>li>ahorizontal layoutand the last one where there was not going back
div.parent+div.child.parent{position:relative} .child{position:absolute}
mad scientist voice
“I will conquer the world” buajajajajajaj
Mine was when I figured out the center alignment of an element:
.element{and CSS Image Sprites :)width: 960px;
margin: 0 auto;
}
I agree it was:
Every page element is a box.
I can control the size and position of those boxes.
I can give those boxes background images.
As well as
I can FLOAT that box to the left (I can use .clearfix to make the parent visible again)
Actually I wasn’t even considering leaving a comment here, though have seen this post and really liked it.. But my recent finding of how applying
{display:table}on a parent element and{display: table-cell}on its children coupled with{vertical-align: middle}makes some magic eventually cracked me=) Hope that helps somebody!