css shorthand

July 26th, 2007

ok, next up in our exciting tips and tricks for css is my personal favourite…”css shorthand”…why is this my favourite?…because this reduces the amount of code we have to write and also streamlines our css by making the file smaller and hence load faster.

There are several areas within css where you can use shorthand, I’m not going into them in great depth here but i will mention what they are, give you an example and you can feel free to investigate them further, this is not intended to be a complete and concise reference, merely a guide to help you on your way.

Background
So to start with, lets have a look at the background properties, there are five of them below which I’ve given some values for the purpose of this demo.

example
{
 background-color:#fff;
 background-image:url(../images/sample.jpg);
 background-repeat:no-repeat;
 background-position:top left;
 background-attachment:fixed;
}

The good news it that they can be condensed into one line as so:

example
{
 background:#fff url(../images/sample.jpg) no-repeat top left fixed;
}

job done! moving on.

Font

example
{
 font-style:normal;
 font-variant:small-caps;
 font-weight:bold;
 font-size:1em;
 line-height:1.4em;
 font-family:Verdana, Arial, Helvetica, sans-serif;
}

And the shorthand equivalent:

example
{
 font:normal small-caps bold 1em/1.4em Verdana, Arial, Helvetica, sans-serif;
}

Border
there is a potentialy huge time saver here depending on how you currently work with borders.
firstly the full list of properties available:

example
{
 border-top-width:1px;
 border-top-style:solid;
 border-top-color:#000;
 border-right-width:1px;
 border-right-style:solid;
 border-right-color:#000;
 border-bottom-width:1px;
 border-bottom-style:solid;
 border-bottom-color:#000;
 border-left-width:1px;
 border-left-style:solid;
 border-left-color:#000;
}

and the more common way to work:

example
{
 border-width:1px;
 border-style:solid;
 border-color:#000;
}

And the shorthand equivalent:

example
{
 border:1px solid #000;
}

Margin

example
{
 margin-top:1px;
 margin-right:2px;
 margin-bottom:3px;
 margin-left:4px;
}

And the shorthand equivalent:

example
{
 margin:1px 2px 3px 4px;
}

*side note* i think it was Eric Meyer who came up with the “trouble” method of remembering this…that is T(top)R(right)ouB(bottom)L(left)e. another way is to remember it goes clockwise.

Padding
padding is handled exactly the same way as margin to the shorthand would simply be:

example
{
 padding:5px 6px 7px 8px;
}

List

example
{
 list-style-type:square;
 list-style-position:outside;
 list-style-image:url(../images/sample.png);
}

And the shorthand equivalent:

example
{
 list-style:square outside url(../images/sample.png);
}

And one further shorthand method you may have noticed me using throughout this page, the hex colour code. If you are using colours which are matched in pairs of values (that is three pairs of hexadecimal digits) as in the below examples:

#ffffff
#ff0000
#ff00cc

you can shorten them to 3 digits as follows:

#fff
#f00
#f0c

less typing = less code = faster loading
or
less typing = less code = easier to maintain
or
less typing = more time for beer

the benefits are there for everyone!

Entry Filed under: xhtml/css

2 Comments Add your own

  • 1. Ewan  |  September 13th, 2007 at 9:40 pm

    Good tips – just one question, like padding/margin goes TRBL, is there any order preference for bg-images, font styles et cetera, or does it work all the same, regardless of positioning in the line?

  • 2. mark  |  September 14th, 2007 at 9:29 am

    Good question Ewan, and thankfully something I have actually thought about before! In my experience, there appears to be no required order in the line and it should all work the same. If you want to “do it by the book” I don’t suppose you could go far wrong using the order the w3c uses in the css reference( http://www.w3schools.com/css/css_reference.asp )…I suppose it’s all a matter of coding style really. Incidently, one area where order does matter is in the selectors of the “a” tags, specifically a:link, a:hover and a:visited should stay in that order.

Leave a Comment

Required

Required, hidden

Some HTML allowed:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Trackback this post  |  Subscribe to the comments via RSS Feed

Calendar

May 2017
M T W T F S S
« Feb    
1234567
891011121314
15161718192021
22232425262728
293031  

Categories

Most Recent Posts

Feeds