My CSS Aha moment

I’d like to share with you my CSS “Aha moment”. The “Aha moment” is when some day, in the very back of your head, two neurons get in touch and all of the sudden things become clear as crystal.
I think mine was like two years ago or something and since …

I’d like to share with you my CSS “Aha moment”. The “Aha moment” is when some day, in the very back of your head, two neurons get in touch and all of the sudden things become clear as crystal.

I think mine was like two years ago or something and since then my CSS has been better than ever. I don’t really remember how it came up, but suddenly I understood that absolutely all elements on a page are rectangles.

God, that sounds stupid now but it really helped in understanding how to make efficient CSS. You know, at first you don’t necessarily get that a line of text isn’t shaped around the text but follows the same pattern as all other elements.

And when you get that and most generally the whole box-model (that says width equals width + padding-left + padding-right + border-left + border-right.), everything becomes so simple.

CSS Box Model

Seriously, the first thing to understand when learning CSS is that every element is following the same pattern: a content-box in a padding-box in a border-box in a margin-box; I don’t know why my teachers didn’t even start with that.

Once you get that, it’s really not that hard to produce correct (not necessarily efficient, but still correct) CSS.

What about you? What was your Aha moment?


Print Share Comment Cite Upload Translate
APA
Hugo “Kitty” Giraudel | Sciencx (2024-03-28T16:52:38+00:00) » My CSS Aha moment. Retrieved from https://www.scien.cx/2013/04/30/my-css-aha-moment/.
MLA
" » My CSS Aha moment." Hugo “Kitty” Giraudel | Sciencx - Tuesday April 30, 2013, https://www.scien.cx/2013/04/30/my-css-aha-moment/
HARVARD
Hugo “Kitty” Giraudel | Sciencx Tuesday April 30, 2013 » My CSS Aha moment., viewed 2024-03-28T16:52:38+00:00,<https://www.scien.cx/2013/04/30/my-css-aha-moment/>
VANCOUVER
Hugo “Kitty” Giraudel | Sciencx - » My CSS Aha moment. [Internet]. [Accessed 2024-03-28T16:52:38+00:00]. Available from: https://www.scien.cx/2013/04/30/my-css-aha-moment/
CHICAGO
" » My CSS Aha moment." Hugo “Kitty” Giraudel | Sciencx - Accessed 2024-03-28T16:52:38+00:00. https://www.scien.cx/2013/04/30/my-css-aha-moment/
IEEE
" » My CSS Aha moment." Hugo “Kitty” Giraudel | Sciencx [Online]. Available: https://www.scien.cx/2013/04/30/my-css-aha-moment/. [Accessed: 2024-03-28T16:52:38+00:00]
rf:citation
» My CSS Aha moment | Hugo “Kitty” Giraudel | Sciencx | https://www.scien.cx/2013/04/30/my-css-aha-moment/ | 2024-03-28T16:52:38+00:00
https://github.com/addpipe/simple-recorderjs-demo