Friday, October 29, 2010

Writing Shorten CSS Value

CSS - Cascading Style Sheets CSS or Cascading Style Sheet is is a style sheet language used to describe the presentation semantics (the look and formatting) of a document written in a markup language. (Wikipedia)

Why choose to use CSS?
One of the touted benefits of CSS is that it reduces total page weight, and thus download time, both at first page load, and even more on subsequent loads due to style sheet caching. This is true, but often a sizable fraction of the first load savings is lost because of highly redundant CSS code.

In this post I'll share simple tricks to write CSS in shorten way so that will load your webpage faster. First of all, when you write value of all sides are to be the same, a single value will be applied to all. However, if the top and bottom of the box is to be one way, while the left and right sides should be different, the margin code might be written as follows:
margin: 10px 5px;

This code sets the top and bottom margins to 10px, and the side margins to 5px. One last trick is possible if the top and bottom are different but the sides are the same. With a 10px top margin, 5px left and right side margins, and a 20px bottom margin we can write:
margin: 10px 5px 20px;

It all depends on the number of values applied to the shorthand property and their order. Remember, one value = all sides; two values = top and bottom, sides; three values = top, sides, bottom; and four values = top, right, bottom, left.

There, that wasn't so tough was it? ;)

No comments:

Post a Comment