CSS: Shorthand

Author: MikeW    Date: 2016-06-05 18:57   

CSS shorthand is a technique you can use to simplify and reduce the size of your CSS code. Shorthand rules are part of CSS language and demonstrate the alternative ways a rule can be defined in CSS.

Shorthand Property Cheat Sheet

Here is a list of the properties and their shorthand options. A deeper dive is taken on margin and padding in the next section.

.margin4param{ margin: top right bottom left; }

.margin3param{ margin: top left/right bottom; }

.margin2param{ margin: top/bottom right/left; }

.margin1param{ margin: top/bottom/right/left; }

.padding4param{ padding: top right bottom left; }

.border3param{ margin: line-size line-type color; }

.borderwidth4param{ border-width: top right bottom left; }

.font6param{ font: style variant weight size height family; }

.list3param{ list-style: type position image-url; }

Let's take the first example and represent it using the long format.

.margin4param{
margin-top: top-value;
margin-right: right-value;
margin-bottom: bottom-value;
margin-left: left-value;
}

Both definitions do exactly the same thing. But the example at the top of the list, is much shorter.

Margin and Padding Example

Since I seem to use margin, padding, and border the most often, I created an example demonstrating their use. Notice that CSS looks at a box in a clockwise fashion. When there are a set of 4 values, the order of the values is top, right, bottom, left. This ordering is used for both margin and padding. When there are less than 4 values, the meaning of the values changes as shown for the margin property (the behavior would be the same for padding). The values make sense in the context of the clockwise ordering.

The following example demonstrates the use of the 4 margin and padding variants in a page. An example of the border shorthand is also included.

shorthand.html (Demo)

Source code: shorthand.html

   1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   2 "http://www.w3.org/TR/html4/loose.dtd">
   3 <html>
   4 <head>
   5   <title>CSS Shorthand</title>
   6   <meta name="keywords" content="css, html, shorthand, margin, padding"
   7   <link href="/blip.css" rel="stylesheet" type="text/css"></link>
   8   <style type="text/css">
   9     
  10     h3 { border:black 2pt solid; text-align: center; }
  11     #mainpage{ background-color: #EFEFEF; padding:10px; }
  12     .Margin1Param{ margin:20px; }
  13     .Margin2Param{ margin:0px 50px;  }
  14     .Margin3Param{ margin:50px 250px 0px;  }
  15     .Margin4Param{ margin:0px 0px 0px 150px;  }
  16 
  17     .Pad1Param{ padding:20px; }
  18     .Pad2Param{ padding:0px 50px;  }
  19     .Pad3Param{ padding:50px 250px 0px;  }
  20     .Pad4Param{ padding:0px 0px 0px 150px;  }
  21     
  22     hr{ border:black 2pt solid; }
  23     
  24   </style>
  25 </head>
  26 <body>
  27 <!--  Main Content goes here -->
  28     
  29   <h2>CSS Shorthand</h2>
  30   <!-- Put Page content here -->
  31     <p>This page provides examples of using CSS shorthand.</p>
  32     <div id="mainpage">
  33       <h3 class="Margin1Param">Sample Text</h3>
  34       <h3 class="Margin2Param">Sample Text</h3>
  35       <h3 class="Margin3Param">Sample Text</h3>
  36       <h3 class="Margin4Param">Sample Text</h3>
  37       <hr />
  38       <h3 class="Pad1Param">Sample Text</h3>
  39       <h3 class="Pad2Param">Sample Text</h3>
  40       <h3 class="Pad3Param">Sample Text</h3>
  41       <h3 class="Pad4Param">Sample Text</h3>
  42     </div>  
  43 
  44 <!-- End Main Content -->
  45 </body>
  46 </html>

More Information

For more information, see these excellent discussions of the same topic linked below.