20 CSS Short Hands You'll Love

Web design has come a very long way since the days of tables and spacer .gifs, and when CSS finally got support from most browsers, a whole new world of options opened for web developers and designers. With CSS, or Cascading Style Sheets, we can successfully separate the content markup from the design and aesthetics. This allows us to efficiently and easily manipulate any site design in a completely different CSS file.

With CSS 3 gaining support from more browsers (especially Safari and Firefox) we have many more options than the early days of the web. However, with all of these CSS options can come clutter, large and tedious CSS files, and extremely repetitive style declarations. So how can we cut back on the amount of CSS declarations and clutter? The answer is simple. We can use CSS shorthand properties available to us. Using shorthand properties will allow us define to multiple style properties within one CSS declaration. Some are very easy to understand and use, others are a bit trickier. Today we will have an in depth look at 20 CSS shorthands we are sure you will love.

What you need to know

Before we get started, this article has a few basic prerequisites we will assume you meet. First, a basic knowledge of HTML and HTML markup is necessary. Secondly, a very basic knowledge of CSS is required, as we will be discussing shorthand style declarations. If you need a few resources to get you started with HTML and CSS, we have listed some for you below:

A word of caution.

Before we jump into using CSS shorthand techniques we need to discuss a quick word of warning. When using shorthand CSS properties, and depending on the property, you are allowed to omit certain values. When you omit certain values, the browser uses the default value for that element's properties. As we all know, not all browsers act the same, so it is important that you understand what you are, and more importantly, what you are not declaring.

One nice way to deal with default value is to use some form of a CSS reset on the elements you would like to reset. For example, to reset all of the margins and padding defaults to zero on all of our elements, we could do something like this:

* {

We will discuss the margin and padding shortcuts below. Just keep in mind when using shorthands it is best to declare as many values as possible so you do not have any unexpected or unintended behavior. Lastly, below are some resources to acquaint you with different CSS resets and reset techniques.

With all that said, let's get started with our list of CSS shorthand techniques!

1. Margins

We will start out with a few easy ones, and it doesn't get much easier than setting the margins using shorthand CSS. Keep in mind that with margins, the order goes from top, to right, to bottom, to left. Much like a clock. Say we wanted to set all margins to 20 pixels. We could accomplish this like so:

#your_div {
margin: 20px;

Simple right? Now let's say that we want the left and right margins to be centered and the top and bottom to be 10 pixels.

#your_div {
margin: 10px auto;

Lastly, we can declare three values, like below:

#your_div {
margin: 20px auto 50px;

The above snippet would apply a 20 pixel margin to the top, center the left and right margins, and apply a fifty pixel margin to the bottom. Got it? Good, lets move on to padding.

2. Padding

If you understood margins, you will have no issue grasping the idea of padding shorthand declarations. Actually, they work the exact same way. For example, this:

#your_div {

could easily be re-written like so:

#your _div {
padding:10px 20px 50px 45px;

If you have trouble remembering the order, just remember the clock analogy. The order goes clockwise:

#your _div {
padding: top right bottom left;

3. Background

Now that we have covered a few basic shorthand techniques, we will cover a one that is a bit more n depth but extremely useful, the background property. Here is an example without any shorthand techniques:

#your _div {
background-color: transparent;
background-image: url('image.jpg');
background-repeat: no-repeat;
background-position: top right;
background-attachment: scroll;

Notice how many different background properties we have to use to achieve the desired effect? How could we make this shorter? Well, we can use the shorthand background property like below:

#your _div {
background: transparent url('image.jpg') no-repeat top right scroll;

Much easier, and once you get used to it, I think you will find it much easier to read. Take note on how we declared all of the necessary values. We could have left off the color (transparent) but then we leave that up to default values and browser implementations, not a good thing. Remember to declare as many properties as you can.

4. Font Property

The font property is perhaps the trickiest shorthand to remember, simply because of all of the values it accepts and the order in which they are accepted. Again, keep in mind that if you are not declaring certain properties then default values will be used. First, an example of non shorthand font declarations:

#your _div {
font-family:Georgia, serif;

We can now save some space an re-write the above like so:

#your _div {
font: small-caps bold 1em/1.4em 'Georgia' ,serif;

Did you notice how no font-style was declared (i.e. italic)? This is again because of default values, and the default font-style is normal, so we don't need to set it. But, pretend you did want to set it, where would it go? Simple, just do this:

#your _div {
font: italic small-caps bold 1em/1.4em 'Georgia' ,serif;

Lastly, note how the font-size and line-height are separated by a '/', don't forget this or you will end up scratching your head!

5. The list-item property

As always, we will look at how this would be used without shorthand first:

ul {
list-style-image: none;

The shorthand is quite straightforward for the list-item properties, it is in the exact order as above. The list-style-image does not need to be declared and defaults to no image:

ul {
list-style: decimal-leading-zero inside;

If you wanted to use an image, simply append that onto the end of the property declaration, like below:

ul {
list-style:decimal-leading-zero inside url('image.jpg');

6. Border property

Borders can be particularly useful to bring some depth and focus to a design. A default border declaration (excluding the border-radius which we will discuss later on) would look like so:

#your _div {
border-style: solid;
border-color: #4096EE;

This would give us exactly what you would expect, a 2 pixel solid border with a light blue color. To save some space and time we could re-write our declaration to reflect the below:

#your _div {
border: 2px solid #4096EE;

With CSS 3 we can also have rounded corners, more on that in a bit. Also note that you can declare colors in rgb format if you are more comfortable doing so. To accomplish this we would edit our border property:

#your _div {
border:2px solid rgb(64, 150, 238);

Simple enough!

7. Outline

Very closely related to the border but rarely used nowadays is the outline property, which acts similarly to the border shorthand declarations. A default outline declaration would like this:

img {
outline-width: 5px;
outline-color: #000000;

Outline in shorthand would become:

img {
outline: 5px solid #000000;

Of course, once again you can use rgb or hex colors, whichever you prefer. Speaking of colors...

8. Color shorthands

Most designers and developers tend to use hexadecimal declarations in favor over rgb declarations. There really isn't much of a difference, but hexadecimal does allow for certain shorthand declarations depending on the color. Most importantly, if the hexadecimal consist of three pairs of numbers or letters, you can shorten the declaration in half. Let's look at an example:

#your _div {
color: #FFFFFF;

This would change the color of any text (besides links) in our div to the color white. Since the hexadecimal declaration contains three pairs of letters, we can shorten it down to this:

#your _div {

Also note that the color property is case-insensitive, meaning this would be just as valid:

#your _div {

It doesn't save much space, but I find it just as easy to read and understand. Anytime you can get rid of repetition, you should take advantage.

9. Comma separated declarations

A nice feature of CSS is the ability to declare styles for multiple properties at once by separating them with a comma. You can almost always find these techniques being used in CSS resets, where many elements need to be set with a certain style all at once. Enough talk, here is a real world example:

h1, h2, h3, h4, h5, h6 {
font-family:Helvetica, Verdana, sans-serif;

We have just declared the font-family for all of our header tags using one declaration. Sweet huh?

10. Cross browser transparency

This one isn't much of a shorthand, but is extremely useful for anyone who has struggled with opacity across different browser platforms. Hats off to my friend Chris Coyier for bringing this set of declarations to my attention:

#your _div {
-khtml-opacity: 0.5;
opacity: 0.5;

So what in the world are all of those different opacity declarations? Lets go over them one by one.

  • filter:alpha(opacity=50) takes care of most versions of IE.
  • -moz-opacity:0.5 takes care of older mozilla browsers such as Netscape Navigator.
  • -khtml-opacity:0.5 takes care of older versions of Safari.
  • opacity:0.5 is the current CSS standard for opacity, which many browsers support (of course IE does not).

11. First-child selectors

First-child selectors allow us to easily select and manipulate certain aspects of our content. Before the first-child selector came into play, Javascript would have been the tool of choice to accomplish this. Now we can do this with simple CSS and save some time and code! Let's select the first [code][/code] in any div with a class of 'footer' and color it light black.

.footer em:first-child {

Please take note that for the first-child selector to function in IE, you need to be sure a doctype is declared (which you should be declaring anyway).

12. First-letter

While we are on the topic of pseduo-selectors, it would make sense to discuss the first-letter property, which does what you would expect, it allows you to make changes to the first letter of an element. You can find this kind of style in use in a lot of newspaper and magazine themes, where the first letter is much larger and often a different color than the rest of the text. Enough talk, let's do this:


Which would give us something like the image below:

First Letter Example

13. First-line

The first-line property is very straight forward and allows you to do exactly what it says. Perhaps we wanted to change the first line of every paragraph to a different color and a specific font-weight:

#p:first-line {

Again, this saves us time as we do not need to rely on any Javascript or even server side scripting to find and alter the first line of a paragraph.

14. The :before pseudo element

The :before pseudo element is a powerful CSS selector that allows us to insert content before a specific element. However, and this is a big however, it is not supported by IE. We do have options though. By using Dean Edwards IE7 JS code, we can force IE to support many features of CSS that it does not support. Simply link to the JS file and use the selectors as you like. That said, let's insert an image before any paragraph with a class of '.special':

.special:before {
content: url('image.jpg');

How is this a shorthand code? Well, consider how you would accomplish this if CSS did not support it. You would have to either hardcode the content to show up before the class, or use Javascript to find the element and insert content before it.

15. The :after pseudo element

No explanation needed for this pseduo element, it functions and behaves the exact same way as the :before selector, only it can be used to insert content after the element. Again, you will need to use Dean Edwards JS above to get support from IE. Example:

.special:after {

16. Achieving minimum heights

The min-height property is a great way to get certain elements to expand as needed, while maintaing a certain declared height if the content does not need to be expanded. Of course, IE needs a little help when it comes to supporting min-height. Luckily for us, it takes 3 quick lines to achieve this in IE and get cross browser support for min-height. Here is how it looks without supporting IE:

#your_div {

And here is how we add support for IE with three small declarations:

height:auto !important;

Note that this is one of the only scenarios (besides debugging) where using the '!important' declaration would be considered acceptable. This fix is often referred to as the Dustin Diaz min-height fast hack.

17. The clip property

One of the least used CSS properties has to be the clip property, which allows you to set the shape and area to clip of a certain element. This is most frequently used on images to clip out certain areas. Seifi has a great example of the clip property with images. A basic example would be something like below:

img {
clip:rect(0px 50px 200px 0px);

The order of how to clip is the same order we discussed with the margins and paddings, moving from top, to right, to bottom, to left.

Having Fun With CSS 3

For our last three shorthand techniques, we will review some fun and cool new CSS 3 properties that allows us to do things we have never before been able to do with only CSS. Please note many of these are only supported by a select few browsers, I will make sure to note in what browsers each are supported.

18. The border-radius property

When it was unveiled that CSS 3 would be offering a border-radius property, many developers and designers were ecstatic. No more using images for rounded corners right? Well, you're half correct. We are not quite there on cross browser support, but we can still use the property and let browsers that do not support it show square corners instead. To achieve shorthand rounded corners in Firefox, Safari, and Chrome, we can do something like so:

.rounded_corner {

This would give us a rounded box with a radius of ten pixels. If you're browser supports border-radius, you would see something like the image below:

Border Radius

19. Drop shadow

Another nice CSS 3 feature is the ability to add a drop shadow to a given element. Only Safari and Chrome support this at the time of writing, hopefully other browsers will follow along soon. Let's create a basic box with a light gray drop shadow using shorthand.

.your_shadow {
-webkit-box-shadow: 5px 5px 2px #ccc;

So what are the box-shadow arguments that we have used? The first argument is the x-axis or horizontal distance between the drop shadow and the declared element. The second argument is the y-axis or vertical distance between the drop shadow and element. The third argument is the radius of the shadow, or in other words, how blurry or clear it appears. Lastly, is the color you wish the drop shadow to be, in which have used a slight gray. If you are using Safari or Chrome you will see something like the image below:

Drop Shadow

20. Resize

We have said a very cool CSS 3 technique for last, the resize property which is currently only supported by Safari. With resize, we can grab a small triangle on the bottom right of the element and resize it as we wish. We need to make sure we also declare some type of overflow property when using the resize property. Example time:

border:2px solid #666;

Take note of how we have set the min-width/max-width and min-height/max-height properties as well to control the resizing. No need to worry about IE as this only works in Safari. The above will give you something similar to the image below:

Resize Property

That's it for now, do you have any CSS shorthands you frequently use that we didn't cover? Did you learn something new? Share your thoughts with us in the comments section below!


Written by Drew Douglass

Written 2011-05-05 (Updated 2016-10-10)
Share your thoughts

shelleweb,  22 August, 2010

great article, few new tidbits in there to try out, thanks :)

Bred,  14 May, 2010

Hi. I think you should try form builder http://phpforms.net/tutorial/html-basics/form-builder.html

JAmes,  6 January, 2010

I am not to familiar with the CSS box models.

Ben Hurtisson,  4 January, 2010

Thanks for useful guidelines on CSS.
Web design company

Nathanial Patric,  4 January, 2010

CSS is a nice way to organize your website, I have been using it for years. Thanks for these tips and techniques.

Admin,  30 December, 2009

the information you have shared is really very helpful for guys like us.

benyto,  29 December, 2009

Thanks for sharing

Bob,  28 December, 2009

Thank You very much! Now it works. I wish, I had found this document a few hours earlier. Membuat Blog

MALLESH,  24 December, 2009


Student Loan,  21 December, 2009

It was a very nice idea! Just wanna say thank you for the information you have shared. Just continue writing this kind of post. Thanks again.
Student Loan

England Trains Travel,  19 December, 2009

Css is a nice way to organize your website, i have been usinf it for years. Thanx for these tips and techniques.

England Trains Travel

Los Angeles Dentists,  18 December, 2009

One of the main advantages of using CSS is the large reduction in web page download time. To style text, you used to have to use the <font> tag over and over again. You probably also laid out your site with tables, nested tables and spacer gifs. Now all that presentational information can be placed in one CSS document, with each command listed just once.

Los Angeles Dentists

dalmatia,  17 December, 2009

This site is very useful. I've recently started using CSS. by visiting this site I feel like I know sufficiently enough about CSS and has also answered some web effect questions which have been bugging me


Avis Software,  17 December, 2009

I am a designer and i am developing sites for really long time but as the new technologies coming out everyday it was hard to keep the pace. I decided to learn css and your article has really helped me out. Thanks!<br><br>

Web Hosting by Avis Software

hair loss directory,  16 December, 2009

A complete Guide on some cool techniques. I wished i knew these since long. But better late than never. thanx
hair loss directory

watch 24 season 8,  15 December, 2009

Excellent post on CSS short hands, i have used your instructions to build my website

Money Keyword,  13 December, 2009

Nice article informative and interesting keep it up.<br/>
Money Keywords

Home Design,  13 December, 2009

Excellent demonstration in effective marketing, great stuff.<br/>
Home Design

Bisnis Internet,  13 December, 2009

Interesting post. I have been wondering about this issue,so thanks for posting. I’ll likely be coming back to your blog. Keep up great writing.<br/>
Bisnis Internet

Bisnis Gratis,  13 December, 2009

I have found this website very useful. I am very happy with the navigation, design and speed of the website.<br/>
Bisnis Gratis

Tema WordPress,  8 December, 2009

nice of you to take the time to explain
Tema WordPress

Home Improvement,  8 December, 2009

Yeah definitely learned a lot, thanks.
Home Improvement

Aaron Kolodjski,  6 December, 2009

Very nice Article I Enjoyed it, I linked from my home page to your article as a reference.
web hosting

Web Art Sense,  26 November, 2009

Thanks for this nice article
Web Design Company

Barbie Magazine,  10 November, 2009

nice share, great article, very usefull for us,I did like this very much thanks for the informative post
Barbie Magazine

Atarim Design,  10 November, 2009

The blog post includes screen shots and detailed description of the features.Thanks for sharing
Atarim Design

Money Keywords,  10 November, 2009

Keep it up, your writing is always a joy to read that I even told my friends. Simply loving this!
Money Keywords

Website Designer Katy TX,  17 July, 2009

I have spent hours trying to fix a margin padding problem. I finally did some research and found the reset code below. I hope this site saves some one else time so they don't have to go through what I did.

* {

Jason,  15 July, 2009

Thank you!

Jürgen Jeka,  7 June, 2009

Hi, some notes:

filter: alpha(opacity=50);
Works fine in IE4-7, but IE8 needs quotes:
filter: "alpha(opacity=50);"

Needless since Firefox 0.9, June 2004, drop it!

-khtml-opacity: 0.5;
Needless since Safari 1.2, February 2004, drop it!

opacity: 0.5;
Fine in Firefox/Gecko, Safari/WebKit, Opera

See also https://developer.mozilla.org/En/CSS/Opacity


sonalika,  30 May, 2009

i want css for rounded corners
but this is work but with background
i want rounded rectangle with transparency
if you have idea about that then please give it

uwiuw,  30 May, 2009

i think tis is great and tehcnique that easy to use.

ds,  16 May, 2009

sehr gut.danke sehr.everything for webdesign

Markus,  15 May, 2009

Paul: That is now fixed. Thanks for letting us know!

Paul,  15 May, 2009

Nice article. I'm pretty sure:

#your_div {
20px auto 50px;

isn't a valid declaration. Maybe you were looking for:

#your_div {
margin: 20px auto 50px;

Andy Gongea,  14 May, 2009

you should change the title since you have just 8-9 real CSS Shorthand tips - the rest don't fall under the same category

Joren Rapini,  14 May, 2009

Learned a couple new ones in this (I finally figured out font shorthand because of that damn slash between height and size) Thanks!

Brian Franklin,  6 May, 2009

Yeah..certainly made my endless tweaking much easier :-)

bigboi,  6 May, 2009

cool, will have some use of this, bookmarkeddd :-)

sara,  5 May, 2009

time saved. appreciate

tim,  5 May, 2009

great tips! tnx

Show all related articles..

Overall Best Web Hosts

Buying Guide

Are you finding it difficult to understand what type of hosting you need or which provider to go with? Go through our guide and find the best solution


User Reviews

Make your voice heard! Rate and review your web hosting provider - good or bad, we want to know

Everything has been very stabile and I was very impressed with all the features and extras that were included in the plan.

Bill about iPage

Read iPage Review

Why wait? Get today's best deals now!