CSS has a number of property grouping options by which related properties can be condensed in one declaration instead of specifying a values separately. Writing shorthand CSS assists in easier editing as they reduce the code in the stylesheet and can help web pages load faster. Let’s take a look at how some of the more commonly used CSS rules can be compressed.

Background styles shorthand

In the following CSS block, the background of a page is defined through four separate declarations.

body { background-image: url(“images/test.jpg”);
background-color: #fff;
background-repeat: repeat-x;
background-position: center top;
}

This can be written in a single line as follows:

body { background: url(“images/test.gif”) #fff repeat-x center top; }


Font shorthand

h1{
font-weight: bold;
font-style: italic;
font-variant: small-caps;
font-size: 1em;
line-height: 1.5em;
font-family: Arial, Verdana, sans-serif;
}

can be reduced in one line to the following:

h1 { font: bold italic small-caps 1em/1.5em Arial, Verdana, sans-serif; }

Note here, the CSS shorthand font declaration requires both the font-size and font-family to be specified and the font-family should always come at the end of the CSS statement. If font-weight, font-style, and font-variant are not mentioned, they are set to default value of normal.

Border shorthand

.borderClass{
border-width: 1px;
border-style: solid;
border-color: #000;
}

can be condensed to:

.borderClass{ border:1px solid #000; }

Unlike the font shorthand, the declarations for border can be mentioned in any order. Also note, if
one just specifies border: solid; border-width is set to medium and border-color is set by default to the same color as the text within that element.

The border CSS shorthand can also be applied to specific borders as follows:

.borderClass{
border-right: 1px solid #000;
border-bottom: 1px solid #000;
}

…instead of having to specify border-right-color, border-right-style, border-right-width, border-bottom-color, border-bottom-style, and border-bottom-width separately.

Margin and padding shorthands

Margins and padding are crucial to CSS-based design and are typically used on a large number of elements on a page. Instead of specifying margins or padding separately for four sides in four declarations, they can be written in a single rule.

For example, instead of

#box{
margin-top: 10px;
margin-bottm: 7px;
margin-left: 12px;
margin-right: 5px;
}

can be reduced to

#box{ margin: 10px 5px 7px 12px; }

The order is top, right, bottom and left. An easy way to remember this is consider it to be clockwise from top. The same goes for padding, which can be condensed to #box { padding: 10px 5px 7px 12px; } for padding-top: 10px; padding-bottm: 7px; padding-left: 12px; and padding-right: 5px;

Also worth noting here is that when only two values are specified for padding or margin, the first value is applied to top and bottom, while the second value is applied to right and left.

So,

padding: 10px 5px;

would mean both padding-top and padding-botom are 10px and both padding-left and padding-right are 5px.

And if only one value is specified for padding or margin, the value applies to all four (top, right, bottom and left) sides.

padding: 5px;

adds a padding of 5px on all sides.

Zero is zero is zero

If no padding or margin is required on an object, it can be set a value of 0 (zero) and it does not require an unit to be mentioned because value of zero is always zero irrespective of whether it is pixels or ems or percentages.

Examples,

padding: 10px 0; // applies 10px padding to top and bottom and no padding on left and right.
margin: 0; // means the element has no margin.

Color shorthands

Hexadecimal color codes can be shortened to a three digit value instead of six, if the color code has three pairs of repeating digits.

For example,
color:#ffffff; can be shortened to color:#fff;
background:#aa2233; can be reduced to background:#a23;

Multiple classes

To assign multiple classes to one attribute simply write the class names separated by a space (not comma).

class=”b a”

Here, the CSS declarations of both the classes b and a are applied on a div. But what happens if there are declarations that overlap between the classes? In that case, whichever class is specified later in the style sheet will take precedence.

—

Furthermore, once you are done with a project and have (hopefully) validated your CSS, it is a good idea to optimize the CSS using services like CLEANCSS or CSS Optimizer. They compress the file size of the stylesheets further by removing all unnecessary spaces, but may end up making the rules look messy and difficult to edit further (but then, that is why you are recommended to use them after you are done editing your project).

Latest posts by Smarajit Dasgupta

  • Share/Bookmark