Essential Keystrokes is…

where I share my favorite tips, tools, reviews and commentary on web design, marketing, blogging, new media and related topics. For more about this site and the voice behind it, check out my About page.

Connect

SubscribeFollow me on TwitterLinked In Stumble Upon What I Digg Email me
Apr
23

CSS Classroom – TRouBLe To Remember Shorthand Order

By Char

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.

trouble-to-remember-css

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.

Categories : CSS

14 Comments

1

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!

2

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.

3

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.

4

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!

5

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.

6

I always learned it as clock face starting at noon.

Noon – Top
3 O’Clock – Right
6 O’Clock – Bottom
9 O’Clock – Left

7

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.

8

Hi , TRouBLe will do the job fine.Thank you

regards

9

wow,

Nice information. Thanks for sharing.

10

I am forever having trouble with this. This will help tremendously. Thanks!

11

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 ;”.

12

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!

13

Whoopse WebGyver beat me to it!

14

a:link
a:visited
a:hover
a:active

Love Van Halen Always! that’s how I do it.

Leave a Comment

RECENT PROJECTS

Team Training NE Celiac Family