Home / CSS3 / CSS Shorthand Properties, Beginner Guide
3 minutes read
137 Views
css shorthand properties

CSS shorthand attributes allow you to further compress your CSS file.

Introduction

Faster web page downloads are one of the primary benefits of CSS use. Until recently, styling text required repeatedly using the font> element. Tables, stacked tables, and spacer gifs are probably also used in the design of your website. It is now possible to consolidate all of the presentational data in one CSS page, with each command appearing just once.

However, why stop there? CSS shorthand attributes allow you to further compress your CSS file.

Font

Use:

font: 1em/1.5em bold italic serif

…instead of

font-size: 1em;
line-height: 1.5em;
font-weight: bold;
font-style: italic;
font-family: serif

This CSS shorthand property only work if you are specifying both the font-size and the font-family. Omit either and the CSS rule will be fully ignored. Also, if you do not specify the font-weightfont-style, or font-varient. Then these values will automatically default to a value of normal, so keep this in mind too.

Background

Use:

background: #fff url(image.gif) no-repeat top left

…instead of

background-color: #fff;
background-image: url(image.gif);
background-repeat: no-repeat;
background-position: top left;

If any of these background CSS shorthand directives are omitted, the browser will use the default values. If you leave out there will be no effect if you leave any of these commands off the background CSS shorthand property. As long as you don’t use the background-position command, the container’s top-left corner will be filled with a repeating background picture.

Lists

Use:

list-style: disc outside url(image.gif)

…instead of

list-style: #fff;

list-style-type: disc;
list-style-position: outside;
list-style-image: url(image.gif)

By omitting the disc, outside, and none (i.e., no images) CSS commands from the shorthand rule, the browser will use their default settings.

Margin & padding

In CSS, margin and padding can be specified using shorthand instructions based on how many of an element’s sides have the same margin or padding value.

There are four distinct values.

Use:

margin: 2px 1px 3px 4px (top, right, bottom, left)

…instead of

margin-top: 2px;
margin-right: 1px;
margin-bottom: 3px;
margin-left: 4px

Three different values

Use:

margin: 5em 1em 3em (top, right and left, bottom)

…instead of

margin-top: 5em;
margin-right: 1em;
margin-bottom: 3em;
margin-left: 1em

Two different values

Use:

margin: 5% 1% (top and bottom, right and left)

…instead of

margin-top: 5%;
margin-right: 1%;
margin-bottom: 5%;
margin-left: 1%

One different value

Use:

margin: 0 (top, bottom, right and left)

…instead of

margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0

Padding and border follow the same guidelines as the rest of the design (see below for border).

Border

Use:

border: 1px black solid

…instead of

border-width: 1px;
border-color: black;
border-style: solid

Use:

border-right: 1px black solid

…instead of

border-right-width: 1px;
border-right-color: black;
border-right-style: solid

(Anyone can substitute right with top, bottom or left.)

It is possible to use the aforementioned shorthand CSS rules in conjunction with the following examples of margin and padding shorthand rules.

CSS can be used to style the box’s boundaries, as shown below:

border: 8px solid #336;
border-left: 10px solid #ccf;
border-top: 10px solid #ccf

To get the same result, try these methods:

border: 8px solid #336;
border-width: 10px 8px 8px 10px
border-color: #ccf #336 #336 #ccf

Conclusion

CSS attributes with shorthand names are fantastic! They’re a wonderful technique to minimize the size of a CSS file so that it can be downloaded faster and edited more easily.

Further Reading 📚

Check out to learn more:


Post author

A bright, talented, ambitious and self-motivated 💻 Freelancer, ⌨ Programmer, JavaScript and Typescript lover 📍

  Tweet It


Leave a Reply

Your email address will not be published. Required fields are marked *