longhand

 
  .element {
     background-color: #000;
     background-image: url(image.png);
     background-repeat: no-repeat;
     background-position: top left;
     background-attachment: fixed;
  }
              

shorthand

  .element {
      background: #000 url(img.png) no-repeat top left fixed;
  }
            

longhand

 
  .element {
     border-width: 1px;
     border-style: solid;
     border-color: black;
  }
                

shorthand

  .element {
      border: 1px solid black;
  }
              

longhand

 
  .element {
     outlie-width: thick;
     outline-style: dotted;
     outline-color: red;
  }
                

shorthand

  .element {
      outline: thick dotted red;
  }
              

longhand

 
  .element {
    font-weight: bold;
    font-style: italic;
    font-variant: small-caps;
    font-size: 1em;
    line-height: 1.6;
    font-family: Arial, Helvetica, sans-serif;
  }
                

shorthand

  .element {
      font: bold italic small-caps 1em/1.6 Arial, Helvetica, sans-serif;
  }
              

longhand

 
  .element {
     margin-top: 1em;
     margin-right: 1.5em;
     margin-bottom: 2em;
     margin-left: 2.5em;
  }

  /* or */

  .element {
    margin-top: 1em;
    margin-right: .5em;
    margin-bottom: 1em;
    margin-left: .5em;
 }
                

shorthand

  .element {
      margin: 1em 1.5em 2em 2.5em;
  }

  /* or */

  .element {
      margin: 1em .5em;
  }
              

longhand

 
  .element {
     padding-top: 1em;
     padding-right: 1.5em;
     padding-bottom: 2em;
     padding-left: 2.5em;
  }

  /* or */

  .element {
    padding-top: 1em;
    padding-right: .5em;
    padding-bottom: 1em;
    padding-left: .5em;
 }
                

shorthand

  .element {
      padding: 1em 1.5em 2em 2.5em;
  }

  /* or */

  .element {
      padding: 1em .5em;
  }
              

longhand

 
  .element {
     list-style-type: square;
     list-style-position: inside;
     list-style-image: url("image.png");
  }
                

shorthand

  .element {
      list-style: square inside url("image.png");
  }
              

longhand

 
  .element {
     animation-name: motion;
     animation-duration: 2s;
     animation-timing-function: ease-in;
     animation-delay: 1s;
     animation-direction: alternate;
     animation-iteration-count: infinite;
     animation-fill-mode: none;
     animation-play-state: running;
  }
                

shorthand

  .element {
      animation: motion 2s ease-in 1s alternate infinite none running;
  }
              

longhand

 
  .element {
     flex-grow: 1;
     flex-shrink: 1;
     flex-basis: auto;
  }
                

shorthand

  .element {
      flex: 1 1 auto;
  }
              

longhand

 
  .element {
    transition-property: extend;
    transition-duration: 2s;
    transition-timing-function: linear;
    transition-delay: 1s;  
  }
                

shorthand

  .element {
    transition: extend 2s linear 1s;
  }
              

longhand

 
  .element {
    text-decoration-color: blue;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-thickness: 2px;  
  }
                

shorthand

  .element {
    text-decoration: blue underline solid 2px;
  }
              

longhand

 
  .element {
    column-width: 50px;
    column-count: 4;  
  }
                

shorthand

  .element {
    columns: 50px 4;
  }
              

longhand

 
  .element {
    grid-template-rows: 100px auto 300px;
    grid-template-columns: repeat(2, 1fr) 100px;  
  }
                

shorthand

  .element {
    grid: 100px auto 300px / repeat(2, 1fr) 100px;
  }
              

longhand

 
  .element {
    grid-row-start: 2;
    grid-column-start: 1;
    grid-row-end: 4;
    grid-column-end: 4;  
  }
                

shorthand

  .element {
    grid-area: 2 / 1 / span 2 / span 3;
  }
              

longhand

 
  .element {
    grid-column-start: 1;
    grid-column-end: 3; /* or */ grid-column-end: span 2;  
  }
                

shorthand

  .element {
    grid-column: 1 / 3 ;
    /* or */
    grid-column: 1 / span 2; 
  }
              

longhand

 
  .element {
    grid-row-start: 1;
    grid-row-end: 3; /* or */ grid-row-end: span 2; 
  }
                

shorthand

  .element {
    grid-row: 1 / 3 ;
    /* or */
    grid-row: 1 / span 2;
  }