GrindSmart

CSS shorthand techniques help reduce various tedious code into a single line of CSS code. The advantages of using shorthand is to primarily reduce the CSS file size, but there are other benefits. A bloated and disorganized Stylesheet can be hard to debug if you encounter problems, especially if you wrote it and someone else has to come and fix the “mess”.

Below we’re going to take a look at the most commonly used and widely implemented CSS shorthand techniques that will help you code faster and in a more organized matter.

Please remember to subscribe to our feed and leave us a comment with your thoughts!

Resources

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

Margins

margin:0 10px 0 10px;

Backgrounds

background: url(bg.png) no-repeat top center;

Borders

#div {
border: 1px solid #f2f2f2;
}

Removed Selectors

#logowrap

Colors

#010101, #223345, #FFF000

Padding

 padding: 10px 5px 0 0;

Fonts

font:italic small-caps bold 1em/150% Verdana, Arial, sans-serif;

Lists

list-style:square inside url(filename.gif);

Outline

img {
	outline: 5px solid #000000;
}

Comma Separated Declarations

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

Cross Browser Transparency

#your _div {
	filter:alpha(opacity=50);
	-moz-opacity:0.5;
	-khtml-opacity: 0.5;
	opacity: 0.5;
}

First-letter

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

The :before pseudo element

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

First-Child Selectors

.footer em:first-child {
	color:#ccc;
}

The :after pseudo element

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

The Border-Radius Property

.rounded_corner {
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	width:400px;
	height:100px;
	background-color:#000;
}

Drop Shadow

.your_shadow {
	width:400px;
	height:200px;
	background-color:#000;
	-webkit-box-shadow: 5px 5px 2px #ccc;
} 

Resize

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

There you have it! Let us know what you think, or if we’ve missed any.