It was way back in 2008 that Chris shared his “Ah-ha!” moment when working with CSS. You know, that metaphorical lightbulb that ignites when you go from not knowing what the heck CSS is to suddenly having a baseline for understanding how it works.
For Chris, it was the combination of three concepts:
- Every page element is a box
- I can control the size and position of those boxes
- I can give those boxes background images
It’s funny how something seemingly so simple can snowball into a skill that defines a career, whether that’s designing websites for clients or starting a blog like this one.
There’s a timeless quality to recalling the “Ah-ha!” moment for anyone. The CSS-Tricks team has grown in the eight years since Chris wrote that post, so we thought it would be fun to poll ourselves and share the moments where CSS started making sense for each of us.
Geoff Graham
CSS started to make sense for me when I realized that it was a document containing styles used by an HTML file and that classes were placeholders for where styles should be inserted.
This is somewhat similar to Chris’ experience, but more on the document level of things. I wondered how a web browser was able to change the presentation of a page simply based on what was in the HTML document and all I saw was something like this:
<div class="header">
<h1>A Headline</h1>
<h2>A clever subtitle</h2>
</div>
<div class="content">
<p>The content and all that.</p>
</div>
<div class="footer">
<p>Copyright 2006</p>
</div>I couldn’t for the life of me understand how that chunk of markup could be transformed to a full-fledged design. That is, until I saw the linked CSS file in the document <head>:
<link rel="stylesheet" href="path/to/style.css" />Opening that file got the ol’ hamster wheel in my brain turning and led me to start looking at the markup on an element-by-element basis. Where I was looking at the HTML markup as a whole, I was starting to look at it in blocks:
<div class="header">
<h1>A Headline</h1>
<h2>A clever subtitle</h2>
</div>…where that block corresponds to the rules for .header in the stylesheet. I could see how the height for that block was given a height, a background image, and even could change the color and size of the text within it.
Robin Rendle
I was sitting in my backyard fumbling my way through Jeffrey Zeldman’s Designing with Web Standards when it struck me: web design could go far beyond making my dumb band’s website. With a single command it was possible for websites to reveal their guts, their internal logic, as by that time the Web Inspector would permit me to move boxes on the screen with changing one of the values for padding or margin.
However, it wasn’t until I experimented with this line of CSS that I was hooked:
.element {
float: right;
}With this tiny string of code I could break the whole page, I could smash columns of text together and hurl images off into oblivion; the treasured words of the author were mine to squeeze and stretch, no matter how ugly the end result might be.
I realize now that it’s in this wanton destruction of other people’s websites where everything began to make a little sense. Even today, as a professional web designer, I still get a kick out of breaking things and treating websites like my own personal playground.
Sarah Drasner
I’m an old timer, I was building web pages back in the days of tables before CSS was around. When it first came out, I was skeptical. For me, the big turnaround was CSS Zen Garden. This site did such an amazing job showing how presentation and content could be decoupled, and the sheer power of CSS in terms of layout and control. The ability to not repeat myself and declare something once and have it propagate everywhere had me giddy.
But my “Ah-ha!” moment in working with CSS was a little different. Mine was pretty similar to Chris’, in that it started with boxes, but with a slight variation:
- There are elements that work like boxes, which you can control position and spacing for.
- There are elements that work like text, which you control through line-height, font, etc.
- If I think about how the browser sees the elements and styling, I can debug it.
Past that point, I got into the sheer creative wonder of working with CSS. It started with where code meets design, but has since moved further. Imaginative programming, like animation, generative code, and all the extra magic like for loops. Organizational power for architecting design systems, with mixins, extends, and variables that SASS allows for.
What was your moment?
Many people shared their experiences in the last post Chris wrote, but it would be interesting to know what that moment is for others who may have started working with CSS since it was published.
We also posed the question on Twitter:
A long time ago we talked about your "CSS Ah-ha! Moment"https://t.co/UGKciONYUl
Let's do it again!
When did you start to "get" CSS?
— CSS-Tricks (@Real_CSS_Tricks) July 6, 2016
We got some interesting replies! Here’s a few:
@Real_CSS_Tricks head { display: block;} was a big one for me
— James Nowland (@jnowland) July 6, 2016
@Real_CSS_Tricks that position: absolute is positioned relative to the nearest positioned ancestor
— Patrick Marx (@ptrckmrx) July 7, 2016
@Real_CSS_Tricks Probably when I made a deal with the Devil.
— Billy Purvis (@mrmonkeytech) July 6, 2016
What was your moment? Were you viewing a website’s source to dig for answers? Or perhaps a friend was showing you the ropes? Maybe it was even a blog post you read and still have bookmarked to share. Whatever it is, please share in the comments!
Gosh, my moment was somewhere in between 1998-1999 – yeah, still CSS 1 – when I read about it in a magazine and realized I could position and decorate boxes and tipography with it.
Mine was finding two programs called teleport pro and hot dog pro. The ability of teleport pro was to download a website in its entirety and then strip out every element and rebuild it to try to figure out how they did it. My Ah ha moment was when I finally figured out how to stack a header, 3 blocks next to each other and a footer with floats and (later) positions. It was a magical moment when I had my first table-free design… I was smiling for days :)
My big ding in the ol’ thinkbox came in my first HTML course during the summer semester after I started college. The moment I figured out that class .thisClass can do { these things } from thisFile.css I was pretty much off to the races.
It helps a LOT that CSS is very much an English language, uh, language. I’ve often told people that it really is not difficult to grok, and that’s actually true; my housemate knew as much nothing about it when I started that course as I did, and knows the basics now just by watching me do my homework.
When I began using bootstrap. As I really began digging into the framework it forced me to begin looking at classes of css declarations as components that could be applied multiple times to multiple types of html elements. Prior to that I was hyper focused on the html elements themselves and trying to piece together declarations specific to that element
My moment came from using a Firefox plugin called Stylish. Stylish lets you take an existing site, and use a “user style” made by someone to make that site look better or work better. And some of these user styles are so simple I could write them easily. My epiphany came when I realized I could use CSS (with Stylish) to change sites I frequently go to. I could even treat a new, undeveloped site as a very simple “existing site”, and style it from there.
Mine was working with position and float. How elements changed when applied absolute positing.
The best part was when I learned that float pops out the element of the normal document flow and requires more precise positing.
When I figured out the cascading part, difference between block/inline, how positioning really works and specificity
Damn, I’m old. The first time I saw CSS working was on Windows 98 help pages. Until then, CSS was not supported by Netscape. IE had CSS implemented since IE3, but nobody used it. We used tables as grid layout.
Then I noticed Windows help pages looked like HTML (actually CHM), but it was somehow different.
I found a way to decompile CHM files and it had an entire file structure, with html, images and CSS. I noticed it was different from the HTML I used to work. It was not made with tables or tags and when I opened the CSS files, it had colors, sizes, borders and I could change it.
It changed everything. I didn’t want tables anymore. I still worked with tables for a long time after that because CSS was not complete yet and designers were not going to change the way they worked. But eventually I started introducing the things I found when browsers were able to understand it.
The moment I understood the box model was the moment I realised I have some power over this thing called ‘css’
The moment I realized, that basically display:block is just arranging elements vertically while display: inline* is arranging them horizontally.
But it didn’t last…
The moment I realised other people in my team know CSS far better than I ever could, and so the best thing I could do was make sure that they have the time to do the best job possible…
When i figured out that padding-top in percentage (padding-top:25%;) is calculated from the width of his parent and not the height.
I had two “AH HA” moments in CSS, both of them to do with position and web layout.
1) Position absolute’s top and left properties start based on the next parent element that has a position: relative; (My websites where all over the place because i was using position absolute EVERYWHERE)
2) The second being I can use margin and padding to create the layout I wanted, rather than using “position” to create layout. I could then predict how the site would layout on most screen sizes at the time.
Learning these things gave me the confidence to actually put a site live rather than keeping it local.
My biggest ‘aha’ moment was when I realized that I could absolutely position elements relative to relatively positioned parent elements. That was a game changer for me… long before flex box was a thing of course.
Another big ‘aha’ moment in my career was after I completely finished my first hand-coded website for an actual client and realized that it rendered completely different in IE5 than in Firefox. facepalm At the time I still considered myself strictly a designer, was working exclusively on a Mac and the concepts of cross-browser compatibility and OS virtualization were completely new to me. I had a stressful, frustrating, but ultimately enlightening, crash-course in the uglier side of front-end development. It was truly the beginning of my development career.
CSS has come a long… long way. Now that I write CSS (SCSS!) in the context of web/mobile applications, I am constantly impressed by the technologies and methodologies coming out of the industry, such as Pre/Post Processors and BEM, that make my code manageable, bullet-proof, and blow the minds of my colleagues.
started out just using css to change colors of links instead of using and loved that I could do it just once and it applied to all anchor tags. took me a while to actually start using class names. But the big AHA moment was when I first saw Position Is Everything and started reading blogs about css and browser differences and DOM rendering. When I finally realized how browsers were using css, became easier to debug and compensate for browser issues cough IE cough
oh poop. I was trying to show html tags in my reply, not actually USE them and messed up the post.
Mine was watching Eric Meyer at An Event Apart rip apart a table a re-assemble it as a bar graph. Just the realization that all elements are the same, they just have CSS defaults set by the browser. And 99% of the time you can override those defaults with whatever you want.
Mine was reading books on CSS and discovering that a dropdown menu could be created with it!
I am having a similar epiphany these days in that lots of things I used to do with JavaScript/jQuery can now be done with CSS, and are widely-enough supported that I can count on them working.
Mine was when it hit me that all elements are just boxes(display: block) or text(display:inlines)
My css moment was when I discovered I can make text glow, configure backgrounds and many interesting effects without touching the HTML pages. My favorite CSS feature has always been the gradients.
It was CSS Zen Garden for me too. I was new to CSS, and Zen showed me the concept of wrappers and putting (and controlling)everything within those wrappers.
body {background-image: url(“my-image.jpg”);
That was when I knew CSS was awesome. I didn’t have to go in to every page and change my image at the top.
I have an extensive background in print design — PageMaker / InDeisgn (and the dreaded Quark). I was already used to using a library of “styles” — essentially creating out a set of elements then simply applying that element name to something on the page and it changed and adjusted on the fly.
Oddly enough I think the correlation to how CSS worked flew right past me as I was staring it in the face. During the turn of the century I was juggling a lot of print and web projects and kept doing the web stuff the hard way. HTML came easy enough — as at the time HTML 3.x was straight foward. Fast foward a couple of years “limping” through CSS usage — I was using it but I couldn’t find anyone around me to explain the differences between things like an ID and a CLASS and when to and when not to use them. Why I couldn’t use a DIV instead of a P tag (hated the predefined styling attached to P tags — still do). Mostly picture bull in china shop — managing but PITA …
Anyway at some point it finally clicked in my brain the print styles — same thing — I was already used to font sizing and colors and spcing etc … So to sum up mine was more of a Duuuuh …. rather than an ah-ha moment.
There after I was pissed off until CSS 3 became more normalized because I was so used to massive amounts of control in the print world that just were not available in CSS 2.x I found it restrictive for a few more years. Then CSS 3 dropped with a ton of proprietary tags — but I jumped on them anyway because they were much more like setting up a print layout — I really didn’t give a damn if they didn’t work in IE.
When I first saw http://www.csszengarden.com/ and realised ‘You don’t need tables!’
As part of my Interactive Multimedia Design degree in Belfast, I had to build my own personal website/blog back in 2003. I basically found a template site and ripped off one of the templates. What that taught me was how to go through a HTML file and it’s corresponding CSS and see how it was all put together. Firefox was only just out so I had firebug to explore.
I really had the ah ha moment when I started reading Rachel Andrews The CSS Anthology book. It taught me some great stuff, and CSS Mastery, not sure who it was by.
I have to agree that CSS Zen Garden was mine. Seeing the markup unchanged, and the range of themes people came up with was staggering.
I’m a web design student with a lot to learn. I found this blog yesterday while trying to figure out where to put the ending div tags for a site I am designing for my course. My class is online, and I have been disappointed with my progress but trying to be resourceful and figure out things on my own without soliciting help from the instructor. I have a B.A. in University Studies and while avoiding math and science at the upper level and taking half of my classes in Spanish, I graduated pretty close to having a 4.0, and kick ass at Duolingo in Italian, French, and Portuguese so it has been humbling to spend hours working harder/not smarter & accomplishing nothing. The Department of Vocational Rehabilitation is paying for a six-month certificate program because I have severe hearing loss and cannot work as an international TEFL teacher as I’d planned. While feeling really panicky about the prospects of being stuck in my current position and unable to complete the program, it occurred to me to use the text editor on my office computer to follow video tutorials on my smart phone. I don’t know if my employer would even understand the meaning of the index files containing the colored boxes I created w/ css only containing the word “test.” That was super helpful. Also, had the realization that especially after working on a computer all day at my present job, trying to follow the online lessons side-by-side with my sublime documents on my 13-inch screen macbook pro was murdering my sanity and that I had to actually print the lessons out. I was having a terrible time losing track of what ending div tag belonged to what div but finally figured out how to use < !–blah blah blah tag ends here– >. After going home and sorting my tags out, my code passed through the validator without errors–though I have much to figure out in the way of floats, absolute/relative positioning. I’m starting to feel competent enough to ask the right questions and find blogs like this. Thank you!
So cool to hear from someone doing it this very moment. Strength!
My big CSS “ahahahaha” moment came after finishing my second ever website, which was built as an OOP based ActionScript3 monstrosity. After that one I knew that HTML/CSS was the way to go. LOL.
:hover did it for me
I already mentioned CSS Zen Garden in another comment, but I also need to thank Maxdesign’s Listamatic tutorials. Painstakingly (painfully) bullying lists into shape taught me a lot about the box model.
In fact, the site is still live: http://css.maxdesign.com.au/listamatic/
Kudos to both CSS Zen Garden (my first Aha! moment too) and to Listamatic. The two of them together were fantastic examples when teaching students what CSS could do.
I guess it was when I ended up needing BEM to bring mental sanity to an huge project. Before, CSS was just an hacky way to style stuff.
After BEM, it became an organized way of defining the layout of a component (or set of components).
CSS Modules then blowed my mind :)
My first Ah-ha! moment working with CSS was when we were tasked to build a small website in school to display some stuff I don’t even remember. I realized that I could make tables look less ugly and even add an rounded bottom border to the side navigation via an extra element with background image (was around 2005/2006, so no way of using border-radius back then).
Then CSS3 came around and was too complex for me back then.
The second Ah-ha moment was more recently when I learned about box-sizing: border-box;
I also have to agree with @ptrckmrx on position: absolute; – that one caused much less headache once I understood how it works.
hm .. youngsters everywhere, it seems o.O
I learned HTML the hard way, ie. the craft working with blind tables and spacer GIFs. Then, must have been around 2001, 2002 or so, suddenly CSS was becoming important, and everyone was talking about it. Move away from the days of painstakingly chopping up images and stick them back together into a layout (ok, not true: FireWorks did that already reasonly well for you).
What really got me going wasn’t a fancyful article or book I read, not even Taming Lists, although that certainly had massive impact. What really did it, was this layer thingy, that you only could manage properly in Dreamweaver. Did impress me, a lot. Lots of fun. AFTER that, Taming Lists brought me finally over from the “why? tables work much better for navigation” oldschool folks, to the “oh, CSS actually works – never mind the broken box model, IE has always been a PITA” new school kids :)
One interesting piece from waaay, waaay back in time: Image (Map) Lists. A combination of list-based image maps with hover background images; a still existing example is my website from 11 years ago (beware of the ugliness though): http://old.f2w.de
Now the pervert thing is: Using CSS transforms, that one could actually be turned into something up-to-date :D
cu, w0lf.
I think a big AH-HA moment for me was finding out about reset.css. Ah ha! Even though I’d been using css for years before that and had many other ahha moments, it seems to be very memorable in my mind.
Others were:
Line-height
elements that act like boxes
elements that act like text
absolute positioning of child elements of a relative element (with position: relative required for some browsers to properly display)
% width or height of an image (etc) referred to the parent container
Those are just a few. :-)
When I finally figured out how best to float elements, before that I thought I knew… then I actually knew. That was a good day. Oh and pseudo elements were great the first time, making something from nothing. And finally being able to make table rows act like divs. Mind. Blown.