2011-05-05 submit to reddit

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:

* {
margin:0;
padding:0;
}

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 {
padding-top:10px;
padding-right:20px;
padding-bottom:50px;
padding-left:45px;
}

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-variant:small-caps;
font-weight:bold;
font-size:1em;
line-height:1.4em;
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-type:decimal-leading-zero;
list-style-position:inside;
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-width:2px;
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-style:solid;
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 {
color:#FFF;
}

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

#your _div {
color:#fff;
}

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 {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-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 {
color:#ccc;
}

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:

p:first-letter{
color:#ff0000;
font-size:60px;
}

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 {
color:#ff0000;
font-weight:bold;
}

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 {
content:url('image.jpg');
}

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 {
min-height:200px;
}

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

#your_div{
min-height:200px;
height:auto !important;
height:200px;
}

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 {
-moz-border-radius:10px;
-webkit-border-radius:10px;
width:400px;
height:100px;
background-color:#000;
}

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 {
width:400px;
height:200px;
background-color:#000;
-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:

.resize{
min-width:200px;
min-height:200px;
max-width:500px;
max-height:400px;
resize:both;
background-color:#ccc;
border:2px solid #666;
overflow:auto;
}

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

Add Your Thoughts

captcha

tim,  5 May, 2009

great tips! tnx

sara,  5 May, 2009

time saved. appreciate

bigboi,  6 May, 2009

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

Brian Franklin,  6 May, 2009

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

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!

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

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;
}

Markus,  15 May, 2009

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

ds,  16 May, 2009

sehr gut.danke sehr.everything for webdesign

uwiuw,  30 May, 2009

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

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

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);"

-moz-opacity:0.5;
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

j.j.

Jason,  15 July, 2009

Thank you!

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.

* {
margin:0;
padding:0;
}

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

Atarim Design,  10 November, 2009

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

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

Web Art Sense,  26 November, 2009

Thanks for this nice article
Web Design Company

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

Home Improvement,  8 December, 2009

Yeah definitely learned a lot, thanks.
Home Improvement

Tema WordPress,  8 December, 2009

nice of you to take the time to explain
Tema WordPress

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

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

Home Design,  13 December, 2009

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

Money Keyword,  13 December, 2009

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

watch 24 season 8,  15 December, 2009

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

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

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

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

dalmatia

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

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

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

MALLESH,  24 December, 2009

THANKS FOR THE STUFF. rEALLY APPRECIABLE. Virtual Web Development Company

Bob,  28 December, 2009

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

benyto,  29 December, 2009

Thanks for sharing

Admin,  30 December, 2009

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

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.

Ben Hurtisson,  4 January, 2010

Thanks for useful guidelines on CSS.
Web design company

JAmes,  6 January, 2010

I am not to familiar with the CSS box models.

Bred,  14 May, 2010

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

shelleweb,  22 August, 2010

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

  • swift hero2x
    2014-07-03

    Meet Swift, Apple’s New Programming Language

    Apple unveiled several new goodies at its annual Worldwide Developer Conference (WWDC) held early in June in San Francisco, but none excited the developer attendees more than the introduction of Swift, Apple’s new programming language. It eclipsed even the news of iOS 8 and OS X Yosemite, Apple’s latest versions of its operating systems. Ordinary consumers might not understand the developer frenzy over Swift, but they soon will feel the aftershocks once the next generation of Swift-based apps comes to their beloved Apple devices.
  • statamic
    2014-06-20

    15 Flat File CMS’s for Building Fast, Lightweight Sites

    Since 2009, we’ve been writing about content management systems (CMS’s), a popular and sometimes controversial topic.
  • bitcast
    2014-04-28

    Learn How to Code For Free At These 12+ Interactive Sites

    These days, it seems it’s not enough to know how to operate your computer or hand-held device and how to use the Internet. These days, if you’d like to become competitive in the job market or to keep up with rapidly changing technology, you need to know how to code. Information technology is now so pervasive in our lives, that even designers, architects, writers, marketers, other non-technical professionals, and even kids need to know—or at least appreciate—the language of computers and Internet tech: code.
  • 62012cts
    2014-03-28

    Create a WordPress Child Theme in 5 Easy Steps

    Creating a child theme in WordPress isn’t as difficult as it sounds.
  • 2013-12-04

    The Top Web Design Trends in 2013

    The Internet, like all of today's most popular technologies, is constantly changing in order to adapt to user needs, technological demands, and innovations that entrepreneurs all over the world have developed to make things a bit easier on the average user. Along with far-reaching technological changes and advances, the Internet is always making aesthetic transitions between different trends in web design. Just a decade ago, the average website was just 700 pixels wide, with fonts that were about 10 pixels in total height and images that were grainy, small, and not leveraged quite as well as they are today.
    design trends 2013
  • menu design index
    2013-11-19

    Designing the Navigation Menu

    Ask any designer what single element of any website can make or break its mass appeal and usability, and they'll almost always respond with the same word: Navigation. Today's Internet users are, generally speaking, comfortable with the medium. They've had decades to get used to things like search results, URLs, blogs, online product listings and more. No matter how commonplace the Internet has become, however, and now matter how familiar users are with the way things work, there is one thing that still varies between websites and can make or break any transaction. Navigation elements on a page must adhere to principals of basic design, straightforward labels, and easy-to-read characteristics that draw users in rather than send them away.
  • website speed
    2013-11-06

    Make Your Website Faster

    If the Internet has made just one substantive change to the way people behave or develop their expectations, it's safe to say that it has made everyone a bit more impatient than they used to be. This impatience manifests itself in a number of ways, from an emphasis on shorter paragraphs and brevity in blog posts to page load times that are lightning-fast and designed to impress. Today's website owners have a number of really great benefits to enjoy if they simply ensure that their website is as fast as possible, loading within a fraction of a second on the vast majority of computers around the planet.
  • 2013-10-22

    Two Easy, In-Person Usability Tests for Website Designers

    Since the dawn of modern, standards-based web design, a number of competing firms have been trying to create the Internet's top usability validator. These tools focus on behind-the-scenes coding and tags, including things like alternate text for images and reader-friendly text that works well with today's most popular screen reading applications. The problem, of course, is that these online validators can't actually use the website. They're simply analyzing the site's code, looking for certain tags and pronouncing the site widely accessible and usable for a broad audience. In practical applications, a usability or accessibility "validator" is more theoretical than practical. People, not robots, are going to be using the site, and they're going to see the results of the code rather than the code itself.
  • online store design index
    2013-09-18

    Designing for an Effective Online Shop

    Over the past few years, the Internet has transformed from a place where larger, online retailers thrived, into one that is increasingly allowing small business owners to pursue national and international markets. That means great things for entrepreneurs who are looking to increase their profit margins and dramatically increase their reach, but these benefits must be carefully managed so that they meet or exceed expectations. Indeed, it would be a mistake for business owners to assume that their mere presence in the online environment would guarantee the success of their e-commerce venture.
  • 2013-09-03

    The 7 Most Common CSS Mistakes

    Though CSS is considered one of the easiest and most accessible ways to create modern, standards-based websites, the process of writing a stylesheet still lends itself to a few common errors among even the most seasoned designs. Fixing these errors will result in even more consistency within the design, and they'll create a smaller and faster-loading file that simply works better with the wide variety of both mobile and traditional broadband connections that today's consumers are using. By fixing these errors or avoiding them entirely, designers will simply create a better-looking, more compact site that more easily translates across multiple platforms.
    css index

List all related articles..

Overall Best Web Hosts

1. $1.99Review
Visit Lowest Price Guarantee
2. $2.95Review
3. $4.95Review
4. $3.99Review
5. $3.49Review
Visit Lowest Price Guarantee

Get hosting confidently - When signing up for one of the tagged hosting plans above you can be confident that you are getting the lowest price available for that plan.

Buying Guide

Can't decide what hosting is right for you? Answer 2-5 questions and get your perfect hosting match!

To Questions

User Reviews

Make your voice heard. Review your web hosting provider - good or bad.

  •  
  •  
  •  
  •  
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