Reduce CSS code with Shorthand

Number of designers uses CSS shorthand to create some designing area on website design. Designers are use CSS shorthand because it is easy to manage style sheet. CSS shorthand allows designers to state several CSS properties in one line of code so it reduces the size of CSS code so you can easily apply your style with mark up.

Here Atlanta web designers in Spinx give example of shorthand for only Margin & Padding and Fonts but you can also use shorthand for style borders, backgrounds, lists and etc…

Margin & Padding

In CSS designers can define margin and padding differently but in both same shorthand is use.

You can define margin and padding in various type by using different CSS properties but instead of doing this you can also use all CSS properties combine.

i.e.:

padding-top: 20px;
padding-right: 25px;
padding-bottom: 15px;
padding-left: 5px;

Instead of this designer can also write by combine all CSS properties

i.e.:

padding: 20px 25px 15px 5px;

Designers can also use three variables in which the first one is define top padding, second one is work for both right and left and the third one is for bottom.

Fonts

In font property designers can also make a use of combine CSS properties such as margin and padding but here only two things are required such as font size and font family.

i.e.:

font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: 300;
font-variant: small-caps;
font-style: italic;
line-height: 100%;

Instead of this designer can also write by combine all CSS properties

i.e.:

font: italic small-caps 300 10px/100% Arial, Helvetica, sans-serif;

Posted on April 3, 2012, in Web Design and tagged , . Bookmark the permalink. Leave a comment.

Leave a comment