scriptygoddess

1 | John

April 8th, 2004 at 9:27 pm

Oh, man, that font-style shortcut is great; I had just stumbled across the border hack a few days ago (border: 1px solid #000;), but the font-style cousin to it is even better. Thanks for posting this!

2 | pixelkitty

April 8th, 2004 at 9:44 pm

even better – anything with 0 value can be just 0

so: 10px 0 5px 10px;

3 | KMB

April 9th, 2004 at 6:00 am

Hi there – there is also a nifty shortcut for margin & padding, when your left and right side do have the same value:
margin: 4px 6px 2px;
4px = top ## 6px = right & left ## 2px = bottom
I never used it, but there has to be a way so this comes in handy 😉

4 | PEP

April 9th, 2004 at 8:26 am

the shortcut for margin & padding also works for top and bottom:

padding: 2px 10px;

will put 2px on top and bottom, 10px on left and right

5 | theresa

April 9th, 2004 at 9:08 am

There's also a background shortcut to declare all of the background properties:

background: #ffffff url(image.gif) no-repeat top left;

or other variants.

6 | Jenna

April 9th, 2004 at 10:11 am

A good way to remember the margin/padding order is TRouBLe. Top. Right. Bottom. Left.

7 | rio

April 9th, 2004 at 2:32 pm

nice blog! just wanted to drop a notice that the International Webloggers' Day is June 9, 2004! http://www.intlblogday.tk

8 | Nate

April 12th, 2004 at 2:36 pm

I can never remember the acronyms, but another way to remember the margin/padding number order is to just think of a clock – starting at high noon go clockwise = top, right, bottom, left (:00, :15, :30, :45). For whatever reason that method always stuck with me. Here's a page with a little more shortcut info.

9 | Aldark

April 15th, 2004 at 10:43 am

One thing I would recommend to CSS novices is to intially separate your information with a new line – then when it works modify it. Only because it tends to be easier to find an error or where you want to modify initially.
W3Schools.com is a great CSS reference site.

10 | Julik

April 15th, 2004 at 11:06 am

background: url(image url) left top no-repeat;
essentially the most important here – horizontal position first, vertical position second (not vice-versa)

11 | Christine

April 26th, 2004 at 10:47 pm

Another tip: if using dynamic link pseudo-classes, always make sure to remember to put them in correct order.

a:link, a:visited, a:hover, a:active.

Great acronym to remember it is: LoVe HAte.

And remember to add color/background-color both if using the other, otherwise UA's could over ride your style rules.

12 | Jennifer

October 5th, 2004 at 8:26 am

Saw this here (ALL the shortcuts)

font
font-weight, font-style, font-variant, font-size, line-height, font-family

background
background-color, background-image, background-repeat, background-attachment, background-position

margin
margin-top, margin-right, margin-bottom, margin-left

padding
padding-top, padding-right, padding-bottom, padding-left

border
border-width, border-style, border-color

border-width
border-top-width, border-right-width, border-bottom-width, border-left-width

border-style
border-top-style, border-right-style, border-bottom-style, border-left-style

border-color
border-top-color, border-right-color, border-bottom-color, border-left-color

list-style
list-style-type, list-style-position, list-style-image

outline
outline-color, outline-style, outline-width