Blog

Share this blog : twitter

Sep 5

Written by: IOTAP ::-- Creative Designers Team
9/5/2008 6:11 PM 

This blog explains about the short hand properties in CSS

CSS Shorthand Guide
Below are the few of the CSS properties that contains shortcuts,
Background:
The syntax for declaring the background normal & shorthand values are as follows:
Normal Background Property
.Element
 {
 background-color: color || #hex || (rgb / % || 0-255);
 background-image:url(path);
 background-repeat: repeat || repeat-x || repeat-y || no-repeat;
 background-position: X Y || (top||bottom||center) (left||right||center);
 background-attachment: scroll || fixed;
}
 
Shorthand Background property
.Element
 {
 background: color image repeat position attachment;
}
 
Font:
The syntax for declaring the font normal & shorthand values are as follows:
Normal Font Property
.Element
{
 font-style: normal || italic || oblique;
 font-variant:normal || small-caps;
 font-weight: normal || bold || bolder || || lighter || (100-900);
 font-size: (number+unit) || (xx-small - xx-large);
 line-height: normal || (number+unit);
 "more names";
}
 
Shorthand Font Property
 
.Element
{
 font: style variant   weight   size   line-height   family;
}
 
Border:
The syntax for declaring the border normal & shorthand values are as follows:
Normal border Property
.Element {
 border-width: number+unit;
 border-style: (numerous);
 border-color: color || #hex || (rgb / % || 0-255);
}
 
Shorthand border Property
.Element
{
 Border: width style color;

}

Margin:

The syntax for declaring the margin normal & shorthand values are as follows:
Normal margin Property
.Element 
{
 margin-top: number+unit;
 margin-right: number+unit;
 margin-bottom: number+unit;
 margin-left: number+unit;
}
Shorthand margin Property
 .Element 
{
 Margin: top right bottom left;
}

The same shorthand is applicable for PADDING property also.

Likewise the shorthand properties are available for List-style, Outline, page break etc..

 

Posted by: Kumar.V

Tags:

4 comment(s) so far...

Re: CSS Shorthand Guide

Thanks for great CSS tips.

By Web Design on   11/18/2009 9:36 PM

Re: CSS Shorthand Guide

Thanks for all this. Great tips.

By SEO Services on   3/24/2010 4:10 PM

Re: CSS Shorthand Guide

Another Great Tips For CSS.. Thanks

By DWI attorneys on   6/30/2010 4:04 PM

Re: CSS Shorthand Guide

Hey thanks for the great css tips..

By online degree on   7/9/2010 12:12 PM

Your name:
Your email:
(Optional) Email used only to show Gravatar.
Your website:
Title:
Comment:
Security Code
Enter the code shown above in the box below
Add Comment   Cancel 


 
 
 

IOTAP is an IT Consulting and Software Services Company with global delivery centers in Mumbai and Chennai, India. We are a Microsoft Gold Certified Partner and use products and technologies like Dynamics CRM, SharePoint, Silverlight, and the .Net platform to create solutions that help our customers connect, communicate and collaborate effectively