The Power of CSS Shorthand

So many web developers specially those who are new to the whole HTML CSS thing, will normally write out every single line of code exactly as they were taught.


There is nothing wrong with this type of coding, the only problem is that it takes up a lot of extra time, and from my experience, clients are not interested in what will take the longest, clients want things to happen snappy.


If you've been in coding for quite some time or just starting out, these examples that I'll be giving you will definitely help to code faster and smarter. It can make such a big difference, for example, a css file that contains 1000 lines of code, can become a 500 line css file simply by using shorthand css procedures.

1. Background Attribute - CSS Tag

Normal CSS

background-image: url(images);

background-position: 10px 50px;

background-repeat: no-repeat;

background-color: #fff;

Shorthand CSS

background: #fff url(image) 10px 50px no-repeat;

2. Margin & Padding Attribute - CSS Tag

Same applies to padding

Normal CSS

margin-left: 10px;

margin-right: 10px;

margin-top: 10px;

margin-bottom: 10px;

Shorthand CSS

margin: top right bottom left; "the structure"
          or
margin: top/bottom left/right; "margin: 10px 5px;"

3. Border Attribute - CSS Tag

Normal CSS

border-width: 2px;
border-style: solid;
boder-color: #000;

Shorthand CSS

border: solid 2px #000;

4. Font Attribute - CSS Tag

Normal CSS

font-family: Verdana, Arial;
font-size: 15px;
font-weight: bold;
font-style: italic;
line-height: 1.5px;

Shorthand CSS

  font: italic bold 15px/1.5 Verdana, Arial;

5. Color Attribute - CSS Tag

       Aqua: #00ffff to #0ff
       Black: #000000 to #000
       Blue: #0000ff to #00f
       Dark Grey: #666666 to #666
       Fuchsia:#ff00ff to #f0f
       Light Grey: #cccccc to #ccc
       Lime: #00ff00 to#0f0
       Orange: #ff6600 to #f60
       Red: #ff0000 to #f00
       White: #ffffff to #fff
       Yellow: #ffff00 to #ff0

6. Border-radius Attribute - CSS3 Tag

For Beautiful rounded corners on divs etc.. Only supported on modern browsers, otherwise use cssPie for older browser support.

CSS3

border-radius: topLeft topRight bottomRight bottomLeft;
border-radius: 10px 5px 10px 5px;

7. Opacity Attribute - CSS Tag

For cross browser Opacity, use the following.

CSS

/* Modern Browsers */

opacity:0.5;
/* IE 8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* IE 5-7 */ filter: alpha(opacity=50); /* Netscape */ -moz-opacity: 0.5; /* Safari 1.x */ -khtml-opacity: 0.5;