Skip to main content

Shorthand properties

In CSS there are few properties that can be combined and written in a single line. This page would have references to them.

border​

/* regular */
border-width: 2px
border-style: dashed | solid
border-color: #rrggbb

/* short-hand*/
border: 2px solid ##rrggbb
/* order is irrelevent for this propertiy */

margin​

/* regular */
margin-top: 5px
margin-right: 5px
margin-bottom: 5px
margin-left: 5px

/* short-hand - I (top right bottom left)*/
margin: 5px 10px 5px 10px 

/* short-hand - II (top&bottom left&rigth)*/
margin: 10px 5px

/* short-hand - III (top & bottom & left & rgith)*/
margin: 5px

background​

/* regular */
background-color: #rrggbb
background-image: url('path/to/image.jpg')
background-size: cover
background-position: fixed
background-repeat: no-repeat
background-origin: border-box
background-clip: border-box
background-attachment: url('image.jpg')

/* short-hand - I (order is background-image background-position/background-size background-origin&background-clip)*/
background: url('path/to/image') left 10% bottom 10%/content no-repeat border-box;

/* short-hand - II (order is background-image background-position/background-size background-origin background-clip)*/
background: url('path/to/image') left 10% bottom 10%/content no-repeat border-box padding-box;

/* short-hand - III (Fixed Background: background-image background-repeat background-size background-position)*/
background: url('path/to/image') no-repeat center center fixed;

/* short-hand - IV (Multiple Backgrounds)*/
background: url('path/to/image') repeat, url('path/to/image') no-repeat center center;
background-size: auto, cover;

/* short-hand - V (Fallback Color)*/
background: #rrggbb url('path/to/image') no-repeat center center;

font​

/* regular */
font-style: italic;
font-variant: small-caps;
font-weight: 600;
font-size: 1.5rem;
line-height: 2
font-family: Verdana, sans-serif;

/** short-had (In order font-weight font-size font-family) */
font: 500 1.5rem Verdana, sans-seri 

/** short-had (In order font-style font-variant font-weight font-size font-family) */
font: italic small-caps 500 1.5rem Verdana, sans-seri 

/** short-had (In order font-style font-variant font-weight font-size/line-height font-family) */
font: italic small-caps 500 1.5rem/2 Verdana, sans-seri

flex​

/* regular */
flex-grow: 1;
flex-shrink: 1:
flex-basis: 20%

/* shorthand in order flex-grow, flex-shrink, flex-basis */
flex: 1 1 20%;