CSS Classroom – TRouBLe To Remember Shorthand Order
By
Remember when you were a kid and had to memorize things for school? It was always easier if you had a mnemonic like “Never Eat Soggy Waffles” (for the compass) to help you remember.
Last week one of my clients asked, “How do you know what the numbers in CSS shorthand refer to – meaning which number do I change to get more padding on the right of my image or which number to I change to lessen the margin above an element?”
The numbers refer to Top, Right, Bottom and Left. If you have trouble remembering that they are listed (and applied) in a clockwise fashion around and element, then think of TRouBLe.
Hopefully that will help make things a bit easier to visualize next time you are looking at your website’s CSS file!
If you have a CSS, WordPress or Web Tools question you want answered, let me know in the comments and I’ll do my best to address it in a future post.
14 Comments
April 24th, 2009 at 11:19 pm
So funny- I was doing a Ning site for a client and I had to recheck the margins because I always mess up the order. This will be helpful!
April 27th, 2009 at 10:57 am
Amazing how we quickly forget the basics.
I was just looking at my margins on my site, noticed I had a few things overlapped and out of bounds in a few divisions. Said, “hmmmm … what’s up with that” and had to search to find the correct order.
Thanks for the reminder of the simple things.
April 27th, 2009 at 11:51 am
Good and funny method! I had same trouble to remember the CSS shorthand when I was beginner on web design.hha hha.You way is so interesting &useful for beginner. I have submitted a link of this article to our website webmasterclip.com in order to share with more people.thanks for yr good job.
April 29th, 2009 at 10:08 am
Now they tell me! A while ago, I just memorized the order (it almost makes sense, if you remember where to start).
Another CSS-related mnemonic device I use is LoVe HAte for the following (important) order of entities:
a:link
a:visited
a:hover
a:active
Perhaps that’ll help someone!
May 2nd, 2009 at 12:44 pm
This is a great reminder as CSS can get so complicated. It’s wonderful that you’ve made it so simple and easy to remember.
May 2nd, 2009 at 7:21 pm
I always learned it as clock face starting at noon.
Noon – Top
3 O’Clock – Right
6 O’Clock – Bottom
9 O’Clock – Left
May 3rd, 2009 at 12:51 pm
Very nice! I’m constantly forgetting the order of these numbers and TRouBLe will help me out immensely. Thanks for the quick but useful tip.
May 3rd, 2009 at 2:49 pm
Hi , TRouBLe will do the job fine.Thank you
regards
May 6th, 2009 at 6:12 am
wow,
Nice information. Thanks for sharing.
May 9th, 2009 at 11:10 pm
I am forever having trouble with this. This will help tremendously. Thanks!
May 10th, 2009 at 5:00 am
Nice info, will be greater if you add the formats of three and two definitions as well. I mean like “padding: 5px 10px 15px ;” and “padding: 5px 10px ;”.
June 13th, 2009 at 4:29 am
That’s a good one. I’ve got another I picked up on a forum to remember the correct order of doing links in CSS
a:link, a:visited {}
a:hover, a:active {}
is LoVe and HAte – or Las Vegas Hell’s Angels!
June 13th, 2009 at 4:30 am
Whoopse WebGyver beat me to it!
January 11th, 2010 at 1:06 pm
a:link
a:visited
a:hover
a:active
Love Van Halen Always! that’s how I do it.