What is CSS Shorthand?

Contact Us or call 1-877-932-8228
What is CSS Shorthand?

What is CSS Shorthand?

A CSS shorthand property is a property that can take multiple values, with each value relating to a different regular CSS property. Values are separated by spaces as shown below:

selector {
	property: value1 value2 value3;

In this lesson, we will cover the following shorthand properties:

  • margin
  • padding
  • border
    • border-left
    • border-right
    • border-top
    • border-bottom
    • border-color
    • border-style
    • border-width
  • list-style
  • background
  • font

Benefits of Using CSS Shorthand

There are two major benefits of using CSS shorthand properties:

  • Less code for you to write.
  • Smaller files for the user to download.

Value Order of CSS Shorthand Properties

Some properties, such as border, allow you to rearrange values without affecting the display of the style. For example:

selector {
	border: 1px solid black;

...will display the same as...

selector {
	border: black 1px solid;

However, for other properties, such as padding and margin, order does matter as we'll see later in the lesson.

CSS Initial Values

Many CSS properties have initial values, which are specified in the CSS 2.0 specification. Knowing how CSS initial values affect your styles will help you make your CSS shorthand code even shorter by omitting them from a declaration.

Omitting values from a shorthand property declaration will result in one of the following:

  • CSS inserts a default called an initial value.
  • The omitted value may be inherited from elsewhere in your CSS.

As an example, the initial values for the border property are shown below:

CSS Initial Values for the border Property
Property Initial Value
border-width medium
border-style none
border-color inherited from a color property

Note that the initial value for the border style is "none". No border will appear unless you change this value even if you assign a border-width and border-color.

The following example demonstrates how you can remove values from the border property relying on CSS initial values as well as styles inherited from other property values.

Code Sample:

<meta charset="UTF-8">
<title>Omitting CSS Property Values</title>
<style type="text/css" media="screen">
body {
	color: red;

p.one {
	border: #000 solid 1px; /* sets a black 1px width, solid style border. */
	color: black;

p.two {
	border: solid 1px; /* border color value omitted so it inherits from the color property below (blue). */
	color: blue;

p.three {
	border: solid 1px; /* border color inherited from the body */

<p class="one">The color of this border is specified as a border property value.</p>

<p class="two">The color of this border is inherited from the color property in the p.two class.</p>

<p class="three">The color of this border is inherited from the color property in the body.</p>

Code Explanation

The above code will render the following:Screen capture: Omitting property values

We will indicate the initial values of properties as we introduce them throughout the lesson.