20 CSS Short Hands You'll Love

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:

• HTMLDog Tutorials
• W3 Schools HTML Guide
• CSS Beginner Tutorial
• W3 Schools - Learn CSS

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.

• Eric Meyers CSS Reset
• Collection of Global Reset Styles

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:

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:

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:

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:

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

• Share Twitter
• Share Google+
• Share Facebook
• Share LinkedIn

• 
  2016-08-23
  Quick-Start SEO Guide

  So, you’ve launched your website and everything is ticking over nicely......

  5Comments
• 
  2016-05-27

  20 Hottest Trends in Web Design

  Web design is constantly evolving. Some website owners like to consider the current.....

  0Comment
• 
  2016-05-27

  Designing a Website

  High quality web design doesn’t happen by accident, it takes careful planning and.....

  2Comments
• 
  2016-05-27

  Website Redesign - What to Consider

  Successful websites must evolve to meet the constantly changing demands of search engine.....

  0Comment
• 
  2015-10-30

  An introduction to creating smartphone apps

  With the mobile market and “Internet of Things” (IoT) growing at an amazing.....

  0Comment
• 
  2015-09-09

  10 Essential Questions to Ask Before Hiring a Web Developer

  You have a great idea for an online business. You have everything planned.....

  3Comments

Show all related articles..