Introduction To CSS Shorthand

When you have been developing websites, it is always beneficial to know that there are alternatives to the long coding we do in order to fulfill what we need. Sure the old ways of CSS are fun, but what if we can shorten it, so we can focus more on the design of the page rather than the code? This is what CSS is made for: design and layout.

Let’s say you want to add an inline CSS to the body tag of your webpage. The common method of doing it using your standard CSS is this:

body{

background: url(“bgpic.gif”);

background-color: #00ff00;

background-repeat: repeat-x;

}

Let’s look back to the basics on CSS rule and what these parts are all about.

This is the common way to code a CSS. As a basic rule, the body is the selector; background, background-color and background-repeat is the property; and next to it is the declaration. If we add more CSS properties and more selections, this will be extremely lengthy and could take up much of your HTML code.

Now let’s see how it is done with shorthand CSS:

body {

background: url(“bg.gif”) #00ff00 repeat-x;
}

Now where do all the properties went? We used the background property so background-color, and background-repeat are all located in just one line.

Can we use shorthand on any CSS property? Of course, we can! Let us have a look at the most common shorthand CSS properties:

Do take note, however, that not all shorthand properties will work on all browsers. Moreover, following the syntax will get you an idea of how you can apply all the properties without problems.

The font property

The font property works mostly in all platforms, all modern browsers and any device, so you will not have problems using this shorthand.

SYNTAX:

font: font-style font-variant font-weight font-size line-height font-family

EXAMPLE:

p {

font:italic bold 12px/30px Georgia,serif;
}

As you see, I have not declared all the properties because if you do not need them, do not add them as default values need not be declared.

The margin and padding shorthand property This property is supported by all modern browsers. Do not use the “inherit” value because it is not supported on IE7 and earlier; IE8 requires a !DOCTYPE for it to work. You will not have problems with IE9.

SYNTAX:

margin: margin-top | margin-right | margin-bottom | margin-left padding: padding-top | padding-right | padding-bottom | padding-left

EXAMPLE:

p {

margin: 2em;

}

In this example, only one value is entered, but this means that it is applied to all sides.

p {

margin: 1em 2em 3em;
}

In this example, the value is applied for the top, right and left, and bottom margin respectively.

The border shorthand Border shorthand works in all modern browsers. Expect to see bugs in old and unsupported browsers like the ones in a TV or a mobile phone.

SYNTAX:

border: border-width | border-style | color

EXAMPLE:

p {

border: solid red;
}

This will display the default border width in solid style and is colored red.

p {

border: 2px dotted yellow;
}

This will display 2 pixels of dotted border in yellow.

These are some of the basic and useful shorthand properties you can use. Feel free to explore other CSS shorthand as every CSS has its equivalent shorthand.

Speak Your Mind