Comments on: How’s your CSS Shorthand?

By: Victoria Blount

Victoria Blount — Fri, 12 Jun 2009 08:01:05 +0000

This is a brilliant article , i had no idea that you could do css shorthand, i will definately look into this, is there an article anywhere that details the most common and useful css shorthand to know.

By: Chris Valleskey

Chris Valleskey — Thu, 11 Jun 2009 16:45:25 +0000

Although the order when using left/right, top/bottom, and center doesn’t change the appearance, I have found that it is good practice to have the horizontal value (I.E. left and right) before the vertical value.

Also, if you have a border with different thicknesses on each side and wanted to save a little more space, you could remove “1px” from the first line.

By: VPS Web Hosting

VPS Web Hosting — Sun, 07 Jun 2009 02:22:17 +0000

That’s great… I need to work on my shorthand, sometimes I do it and sometimes i just skip it. It would be nice if DreamWeaver did a better job of suggesting it… but then again maybe I shouldn’t be using that as a crutch.

By: Pieter de Jong

Pieter de Jong — Sat, 06 Jun 2009 20:00:52 +0000

I write in shorthand all the time, i use it the most when i need some killer margin

By: Scott Radcliff

Scott Radcliff — Fri, 05 Jun 2009 17:41:35 +0000

David, if you haven't yet you might want to use the w3schools website for css styles. They are a great resource, I use them all the time. CSS - Font Shorthand

By: David Perel

David Perel — Fri, 05 Jun 2009 09:52:56 +0000

Thanks Lorraine! I have always got the order wrong and always had to revert to the long way of doing it (which is like a sin in todays CSS practice).

Appreciate it.

By: Lorraine Nepomuceno

Lorraine Nepomuceno — Fri, 05 Jun 2009 09:47:10 +0000

Hi David, font styles are:
{ font-style font-variant font-weight font-size line-height font-family }

for example
element {italic normal bold 11px 145% verdana, arial, sans-serif;}

By: David Perel

David Perel — Thu, 04 Jun 2009 16:53:07 +0000

What is the short hand order for font styles? I always get it wrong.

By: web2000

web2000 — Thu, 04 Jun 2009 13:03:20 +0000

Hey, great post Lorraine! Also remember

TRouBLe

when declaring margins/borders/padding etc.. in one property:

{ Top Right Bottom Left }
{10px 5px 20px 12px }

By: Tom

Tom — Thu, 04 Jun 2009 08:36:55 +0000

Another great short hand is available for margin and padding.
margin-top: 10px;
margin-right: 5px;
margin-bottom: 20px;
margin-right: 12px;

in short hand: margin: 10px 5px 20px 12px;

By: Bryan Buchs

Bryan Buchs — Wed, 03 Jun 2009 21:13:15 +0000

@Shane – if you use left/right/top/bottom, the order is irrelevant, but pixel values must be specified as position: left top

By: Shane

Shane — Wed, 03 Jun 2009 20:39:24 +0000

Isn’t the standard background practice to put horizontal position before vertical?