Brackets Emmet CSS

Summary -

In this topic, we explain about the Emmet CSS in detail with screenshots.

The Emmet CSS expands the given CSS abbreviations by giving first characters or short names as input. In this process, specify the acronym first, place the cursor at the end of the abbreviation, press on the tab key or click on "Expand Abbreviation" from the Emmet menu. The abbreviation expands as a CSS property.

In the Emmet CSS, there is a little bit of confusion in finding the perfect matching property. For example, if we provide "pos" or "pos:r" as an abbreviation and expanded, both will produce "position: relative" property. Here the abbreviations are different, but the resulting property is the same.

In Emmet CSS, there is no need to remember all the abbreviations. The abbreviation names mainly depend on the main alphabets in the property.

For example, the abbreviations 'd:tbcl' and "d:tcl" produce "display:table-column" when expanded. Here the abbreviations are different, but the matching property is the same.

The learning of the Emmet CSS abbreviations is not necessary. While typing, brackets editor provides the code hits (if enabled). In the starting, it might not be easy to find an exact property. However, practicing makes it easy.

Margin –

There are different abbreviations for the marginand some of them are listed below.

Type the 'm' and place the cursor at the end. Press the tab key or click on Expand Abbreviation from the Emmet menu. Then the abbreviation is expanded as shown below.

Example –
```
m
```
Output –
Type the 'm:a' and place the cursor at the end. Press the tab key or click on Expand Abbreviation from the Emmet menu. Then the abbreviation is expanded as shown below.

Example –
```
m:a
```
Output –
Type "mt" and expand the abbreviation. The output is "margin-top: ;".
Type "mt:a" and expand the abbreviation. The output is "margin-top: auto;".
Type "mr" and expand the abbreviation. The output is "margin-right: ;".
Type "mr:a" and expand the abbreviation. The output is "margin-right: auto;".
Type "ml" and expand the abbreviation. The output is "margin-left: ;".
Type "ml:a" and expand the abbreviation. The output is "margin-left: auto;".
Type "mb" and expand the abbreviation. The output is "margin-bottom: ;".
Type "mb:a" and expand the abbreviation. The output is "margin-bottom: auto;".

Padding –

There are different abbreviations for the paddingand some of them are listed below.

Type the 'p' and place the cursor at the end. Press the tab key or click on Expand Abbreviation from the Emmet menu. Then the abbreviation is expanded as shown below.

Example –
```
p
```
Output –
Type 'p:t' and expand the abbreviation. The output is padding-top: ;.
Type 'p:r' and expand the abbreviation. The output is padding-right: ;.
Type 'p:l' and expand the abbreviation. The output is padding-left: ;.
Type 'p:b' and expand the abbreviation. The output is padding-bottom: ;.

Box sizing –

There are different abbreviations for the Box sizingand some of them are listed below.

Type the 'bxz' and place the cursor at the end. Press the tab key or click on Expand Abbreviation from the Emmet menu. Then the abbreviation is expanded as shown below.
```
bxz
```
Output –

Type 'bxz:cb' and expand the abbreviation. The output is

    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;

Type 'bxsh' and expand the abbreviation. The output is

    -webkit-box-shadow: inset hoff voff blur color;
    box-shadow: inset hoff voff blur color;

Type 'w' and expand the abbreviation. The output is width: ;.
Type 'w:a' and expand the abbreviation. The output is width: auto;.

Type 'bxz:bb'and expand the abbreviation. The output is

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

Type 'h' and expand the abbreviation. The output is height: ;.
Type 'h:a' and expand the abbreviation. The output is height: auto;.
Type 'maw' and expand the abbreviation. The output is max-width: ;.
Type 'maw:n' and expand the abbreviation. The output is max-width: none;.
Type 'mah' and expand the abbreviation. The output is max-height: ;.
Type 'mah:n' and expand the abbreviation. The output is max-height: none;.
Type 'miw' and expand the abbreviation. The output is min-width: ;.
Type 'mih' and expand the abbreviation. The output is min-height: ;.

Font –

There are different abbreviations for the fontand some of them are listed below.

Type the 'f' and place the cursor at the end. Press the tab key or click on Expand Abbreviation from the Emmet menu. Then the abbreviation is expanded as shown below.

Example –
```
 f
```
Output –
Type 'fw' and expand the abbreviation. The output is font-weight: ;.
Type 'fw:b' and expand the abbreviation. The output is font-weight: bold;.
Type 'fs:n' and expand the abbreviation. The output is font-style: normal;.
Type 'fv:n' and expand the abbreviation. The output is font-variant: normal;.
Type 'fz' and expand the abbreviation. The output is font-size: ;.
Type 'ff' and expand the abbreviation. The output is font-family: ;.
Type 'fw:lr' and expand the abbreviation. The output is font-weight: lighter;
Type 'fs:i' and expand the abbreviation. The output is font-style: italic;
Type 'fza:n' and expand the abbreviation. The output is font-size-adjust: none;
Type 'ff:f' and expand the abbreviation. The output is font-family: fantasy;
Type 'ff:t' and expand the abbreviation. The output is font-family: "Times New Roman", Times, Baskerville, Georgia, serif;
Type 'fef' and expand the abbreviation. The output is font-effect: ;
Type 'fem' and expand the abbreviation. The output is font-emphasize: ;
Type 'fems' and expand the abbreviation. The output is font-emphasize-style: ;
Type 'fsm' and expand the abbreviation. The output is font-smooth: ;
Type 'fst' and expand the abbreviation. The output is font-stretch: ;

Text –

There are different abbreviations for the Textand some of them are listed below.

Type 'va' and place the cursor at the end. Press the tab key or click on Expand Abbreviation from the Emmet menu. Then the abbreviation is expanded as shown below.

Example –
```
va
```
Output –
Type 'va:m' and expand the abbreviation. The output is vertical-align: middle;
Type 'ta' and expand the abbreviation. The output is text-align: left;
Type 'ta:c' and expand the abbreviation. The output is text-align: center;
Type 'td' and expand the abbreviation. The output is text-decoration: none;
Type 'te' and expand the abbreviation. The output is text-emphasis: ;
Type 'th' and expand the abbreviation. The output is text-height: ;
Type 'ti' and expand the abbreviation. The output is text-indent: ;

Type 'tj:a' and expand the abbreviation. The output is

    -ms-text-justify: auto;
    text-justify: auto;

Type 'tj:ic' and expand the abbreviation. The output is

    -ms-text-justify: inter-cluster;
    text-justify: inter-cluster;

Type 'to' and expand the abbreviation. The output is text-outline: ;
Type 'tr' and expand the abbreviation. The output is text-replace: ;
Type 'tt:n' and expand the abbreviation. The output is text-transform: none;
Type 'tw' and expand the abbreviation. The output is text-wrap: ;
Type 'tsh:n' and expand the abbreviation. The output is text-shadow: none;
Type 'lh' and expand the abbreviation. The output is line-height: ;
Type 'whs' and expand the abbreviation. The output is white-space: ;
Type 'wob' and expand the abbreviation. The output is
```
    -ms-word-break: ;
    word-break: ;
```
Type 'wos' and expand the abbreviation. The output is word-spacing: ;
Type 'wow' and expand the abbreviation. The output is word-wrap: ;

Background –

There are different abbreviations for the Backgroundand some of them are listed below.

Type 'bg' and place the cursor at the end. Press the tab key or click on Expand Abbreviation from the Emmet menu. Then the abbreviation is expanded as shown below.

Example –
```
bg
```
Output –
Type 'bgc' and expand the abbreviation. The output is background-color: #fff;
Type 'bgi' and expand the abbreviation. The output is background-image: url();
Type 'bgr:n' and expand the abbreviation. The output is background-repeat: no-repeat;
Type 'bgr:n' and expand the abbreviation. The output is background-attachment: ;
Type 'bg+' and expand the abbreviation. The output is background: #fff url() 0 0 no-repeat;
Type 'bgc:t' and expand the abbreviation. The output is background-color: transparent;
Type 'bga:s' and expand the abbreviation. The output is background-attachment: scroll;
Type 'bgp' and expand the abbreviation. The output is background-position: 0 0;
Type 'bgbk' and expand the abbreviation. The output is background-break: ;

Type 'bgcp:bb' and expand the abbreviation. The output is

    -webkit-background-clip: border-box;
    -moz-background-clip: border-box;
    background-clip: border-box;

Type 'bgo' and expand the abbreviation. The output is

    -webkit-background-origin: ;
    background-origin: ;

Type 'bgs' and expand the abbreviation. The output is

    -webkit-background-size: ;
    background-size: ;

Color –

There are different abbreviations for the colorand some of them are listed below.

Type 'c' and place the cursor at the end. Press the tab key or click on Expand Abbreviation from the Emmet menu. Then the abbreviation is expanded as shown below.

Example –
```
c
```
Output –
Type 'c:r' and expand the abbreviation. The output is color: rgb(0, 0, 0);
Type 'c:ra' and expand the abbreviation. The output is color: rgba(0, 0, 0, .5);
Type 'op' and expand the abbreviation. The output is opacity: ;

Generated content –

There are different abbreviations for the Generated contentand some of them are listed below.

Type 'cnt' and place the cursor at the end. Press the tab key or click on Expand Abbreviation from the Emmet menu. Then the abbreviation is expanded as shown below.

Example –
```
 cnt
```
Output –
Type 'ct' and expand the abbreviation. The output is content: ;
Type 'cnt:a / ct:a' and expand the abbreviation. The output is content: attr();
Type 'q' and expand the abbreviation. The output is quotes: ;
Type 'coi' and expand the abbreviation. The output is counter-increment: ;
Type 'cnt:n / ct:n' and expand the abbreviation. The output is content: normal;
Type 'cnt:oq / ct:oq' and expand the abbreviation. The output is content: open-quote;
Type 'cnt:noq / ct:noq' and expand the abbreviation. The output is content: no-open-quote;
Type 'cnt:cq / ct:cq' and expand the abbreviation. The output is content: close-quote;
Type 'cnt:ncq / ct:ncq' and expand the abbreviation. The output is content: no-close-quote;
Type 'cnt:cs / ct:cs' and expand the abbreviation. The output is content: counters();
Type 'q:n' and expand the abbreviation. The output is quotes: none;
Type 'cor' and expand the abbreviation. The output is counter-reset: ;

Visual formatting –

There are different abbreviations for the visual formattingand some of them are listed below.

Type 'pos' and place the cursor at the end. Press the tab key or click on Expand Abbreviation from the Emmet menu. Then the abbreviation is expanded as shown below.

Example –
```
pos
```
Output –
Type 't' and expand the abbreviation. The output is top: ;
Type 'z:a' and expand the abbreviation. The output is z-index: auto;
Type 'cl' and expand the abbreviation. The output is clear: both;
Type 'd:n' and expand the abbreviation. The output is display: none;
Type 'v' and expand the abbreviation. The output is visibility: hidden;
Type 'ov' and expand the abbreviation. The output is overflow: hidden;
Type 'cp:a' and expand the abbreviation. The output is clip: auto;
Type 'cur' and expand the abbreviation. The output is cursor: pointer;
Type 'pos:s' and expand the abbreviation. The output is position: static;
Type 'r:a' and expand the abbreviation. The output is right: auto;
Type 'f1:r' and expand the abbreviation. The output is font:1px :r;
Type 'cl:l' and expand the abbreviation. The output is clear: left;
Type 'd:tb' and expand the abbreviation. The output is display: table;
Type 'd:rbb' and expand the abbreviation. The output is display: ruby-base;
Type 'v:h' and expand the abbreviation. The output is visibility: hidden;
Type 'ovx:v' and expand the abbreviation. The output is overflow-x: visible;
Type 'zoo / zm' and expand the abbreviation. The output is zoom: 1;
Type 'cp:r' and expand the abbreviation. The output is clip: rect(top right bottom left);
Type 'rsz' and expand the abbreviation. The output is resize: ;
Type 'cur:c' and expand the abbreviation. The output is cursor: crosshair;

Outlines –

There are different abbreviations for the Outlinesand some of them are listed below.

Type 'ol' and place the cursor at the end. Press the tab key or click on Expand Abbreviation from the Emmet menu. Then the abbreviation is expanded as shown below.

Example –
```
ol
```
Output –
Type 'olw' and expand the abbreviation. The output is outline-width: ;
Type 'ols' and expand the abbreviation. The output is outline-style: ;
Type 'ols' and expand the abbreviation. The output is outline-style: groove;
Type 'olc' and expand the abbreviation. The output is outline-color: #000;
Type 'ol:n' and expand the abbreviation. The output is outline: none;
Type 'olo' and expand the abbreviation. The output is outline-offset: ;
Type 'olw:tc' and expand the abbreviation. The output is outline-width: thick;
Type 'ols:n' and expand the abbreviation. The output is outline-style: none;
Type 'ols:s' and expand the abbreviation. The output is outline-style: solid;
Type 'ols:i' and expand the abbreviation. The output is outline-style: inset;
Type 'ols:dt' and expand the abbreviation. The output is outline-style: dotted;
Type 'olc:i' and expand the abbreviation. The output is outline-color: invert;

Tables –

There are different abbreviations for the Tablesand some of them are listed below.

Type 'tbl' and place the cursor at the end. Press the tab key or click on Expand Abbreviation from the Emmet menu. Then the abbreviation is expanded as shown below.

Example –
```
tbl
```
Output –
Type 'tbl:f' and expand the abbreviation. The output is table-layout: fixed;
Type 'cps' and expand the abbreviation. The output is caption-side: ;
Type 'ec' and expand the abbreviation. The output is empty-cells: ;
Type 'tbl:a' and expand the abbreviation. The output is table-layout: auto;
Type 'cps:t' and expand the abbreviation. The output is caption-side: top;
Type 'cps:b' and expand the abbreviation. The output is caption-side: bottom;
Type 'ec:s' and expand the abbreviation. The output is empty-cells: show;
Type 'ec:h' and expand the abbreviation. The output is empty-cells: hide;

Border –

There are different abbreviations for the Borderand some of them are listed below.

Type 'bd' and place the cursor at the end. Press the tab key or click on Expand Abbreviation from the Emmet menu. Then the abbreviation is expanded as shown below.

Example –
```
 bd
```
Output –
Type 'bdcl' and expand the abbreviation. The output is border-collapse: ;
Type 'bdc:t' and expand the abbreviation. The output is border-color: transparent;

Type 'bdi' and expand the abbreviation. The output is

    -webkit-border-image: url();
    -o-border-image: url();
    border-image: url();

Type 'bdf:ow' and expand the abbreviation. The output is

    -webkit-border-fit: overwrite;
    border-fit: overwrite;

Type 'bd+' and expand the abbreviation. The output is border: 1px solid #000;
Type 'bdbk:c' and expand the abbreviation. The output is border-break: close;
Type 'bdri:n' and expand the abbreviation. The output is border-right-image: none;
Type 'bds:w' and expand the abbreviation. The output is border-style: wave;
Type 'bdw' and expand the abbreviation. The output is border-width: ;
Type 'bdt:n' and expand the abbreviation. The output is border-top: none;
Type 'bdrw' and expand the abbreviation. The output is border-right-width: ;
Type 'bdbs' and expand the abbreviation. The output is border-bottom-style: ;
Type 'bdl / bl' and expand the abbreviation. The output is border-left: ;
Type 'bdrs' and expand the abbreviation. The output is border-radius: ;

Lists –

There are different abbreviations for the Listsand some of them are listed below.

Type 'lis' and place the cursor at the end. Press the tab key or click on Expand Abbreviation from the Emmet menu. Then the abbreviation is expanded as shown below.

Example –
```
 lis
```
Output –
Type 'lisp' and expand the abbreviation. The output is list-style-position: ;
Type 'list' and expand the abbreviation. The output is list-style-type: ;
Type 'lisi' and expand the abbreviation. The output is list-style-image: ;
Type 'lis:n' and expand the abbreviation. The output is list-style: none;
Type 'lisp:i' and expand the abbreviation. The output is list-style-position: inside;
Type 'lisp:o' and expand the abbreviation. The output is list-style-position: outside;
Type 'list:d' and expand the abbreviation. The output is list-style-type: disc;
Type 'list:s' and expand the abbreviation. The output is list-style-type: square;
Type 'list:dc' and expand the abbreviation. The output is list-style-type: decimal;
Type 'list:lr' and expand the abbreviation. The output is list-style-type: lower-roman;
Type 'lisi:n' and expand the abbreviation. The output is list-style-image: none;

Print –

There are different abbreviations for the Printand some of them are listed below.

Type 'pgbb' and place the cursor at the end. Press the tab key or click on Expand Abbreviation from the Emmet menu. Then the abbreviation is expanded as shown below.

Example –
```
pgbb
```
Output –
Type 'pgbi' and expand the abbreviation. The output is page-break-inside: ;
Type 'pgba' and expand the abbreviation. The output is page-break-after: ;
Type 'orp' and expand the abbreviation. The output is orphans: ;
Type 'wid' and expand the abbreviation. The output is widows: ;
Type 'pgbb:au' and expand the abbreviation. The output is page-break-before: auto;
Type 'pgbb:al' and expand the abbreviation. The output is page-break-before: always;
Type 'pgbb:l' and expand the abbreviation. The output is page-break-before: left;
Type 'pgbb:r' and expand the abbreviation. The output is page-break-before: right;
Type 'pgbi:au' and expand the abbreviation. The output is page-break-inside: auto;
Type 'pgbi:av' and expand the abbreviation. The output is page-break-inside: avoid;
Type 'pgba:au' and expand the abbreviation. The output is page-break-after: auto;
Type 'pgba:al' and expand the abbreviation. The output is page-break-after: always;
Type 'pgba:l' and expand the abbreviation. The output is page-break-after: left;
Type 'pgba:r' and expand the abbreviation. The output is page-break-after: right;

Media query –

There is only one abbreviation in the media query.

Type '@m / @media' and place the cursor at the end. Then click on the tab key or click on the Emmet menu and click on the Expand abbreviation. Then the abbreviation is expanded. The above two abbreviations have the same output.

Example –
```
@m / @media
```
Output –

Animation –

There are different abbreviations for the Animationand some of them are listed below.

Type 'anim' and place the cursor at the end. Press the tab key or click on Expand Abbreviation from the Emmet menu. Then the abbreviation is expanded as shown below.

Example –
```
anim
```
Output –

Type 'anim-' and expand the abbreviation. The output is

    -webkit-animation: name duration timing-function delay iteration-count direction fill-mode;
    -o-animation: name duration timing-function delay iteration-count direction fill-mode;
    animation: name duration timing-function delay iteration-count direction fill-mode;

Type 'animdir' and expand the abbreviation. The output is

    -webkit-animation-direction: normal;
    -o-animation-direction: normal;
    animation-direction: normal;

Type 'animfm' and expand the abbreviation. The output is

    -webkit-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;

Type 'animn' and expand the abbreviation. The output is

    -webkit-animation-name: none;
    -o-animation-name: none;
    animation-name: none;

Type 'animdel'. and expand the abbreviation. The output is

    -webkit-animation-delay: time;
    -o-animation-delay: time;
    animation-delay: time;

Type 'animdir:a' and expand the abbreviation. The output is

    -webkit-animation-direction: alternate;
    -o-animation-direction: alternate;
    animation-direction: alternate;

Type 'animdur' and expand the abbreviation. The output is

    -webkit-animation-duration: 0s;
    -o-animation-duration: 0s;
    animation-duration: 0s;

Type 'animfm:f' and expand the abbreviation. The output is

    -webkit-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    animation-fill-mode: forwards;

Type 'animic:i' and expand the abbreviation. The output is

    -webkit-animation-iteration-count: infinite;
    -o-animation-iteration-count: infinite;
    animation-iteration-count: infinite;

Type 'animps:p' and expand the abbreviation. The output is

    -webkit-animation-play-state: paused;
    -o-animation-play-state: paused;
    animation-play-state: paused;

Type 'animtf:eio' and expand the abbreviation. The output is

    -webkit-animation-timing-function: ease-in-out;
    -o-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;

Type 'animtf:l' and expand the abbreviation. The output is

    -webkit-animation-timing-function: linear;
    -o-animation-timing-function: linear;
    animation-timing-function: linear;

Flex –

There are different abbreviations for the flexand some of them are listed below.

Type 'fx' and place the cursor at the end. Press the tab key or click on Expand Abbreviation from the Emmet menu. Then the abbreviation is expanded as shown below.

Example –
```
 fx
```
Output –

Type 'fxd' and expand the abbreviation. The output is

    -webkit-flex-direction: ;
    -moz-flex-direction: ;
    -ms-flex-direction: ;
    -o-flex-direction: ;
    flex-direction: ;

Type 'fxf' and expand the abbreviation. The output is

    -webkit-flex-flow: ;
    -moz-flex-flow: ;
    -ms-flex-flow: ;
    -o-flex-flow: ;
    flex-flow: ;

Type 'fxsh' and expand the abbreviation. The output is flex-shrink: ;
Type 'fxb' and expand the abbreviation. The output is flex-basis: ;

Type 'fx:cr' and expand the abbreviation. The output is

    -webkit-flex-direction: column-reverse;
    -moz-flex-direction: column-reverse;
    -ms-flex-direction: column-reverse;
    -o-flex-direction: column-reverse;
    flex-direction: column-reverse;

Type 'fx:r' and expand the abbreviation. The output is

    -webkit-flex-direction: row;
    -moz-flex-direction: row;
    -ms-flex-direction: row;
    -o-flex-direction: row;
    flex-direction: row;

Type 'fxg' and expand the abbreviation. The output is flex-grow: ;

Type 'fxw' and expand the abbreviation. The output is

    -webkit-flex-wrap: ;
    -moz-flex-wrap: ;
    -ms-flex-wrap: ;
    -o-flex-wrap: ;
    flex-wrap: ;

Type 'fxw:wr' and expand the abbreviation. The output is

    -webkit-flex-wrap: wrap-reverse;
    -moz-flex-wrap: wrap-reverse;
    -ms-flex-wrap: wrap-reverse;
    -o-flex-wrap: wrap-reverse;
    flex-wrap: wrap-reverse;

Transform and Transition –

There are different abbreviations for the Transform and transitionand some of them are listed below.

Type 'trf' and place the cursor at the end. Press the tab key or click on Expand Abbreviation from the Emmet menu. Then the abbreviation is expanded as shown below.

Example –
```
 trf
```
Output –

Type 'trf:r' and expand the abbreviation. The output is

    -webkit-transform: rotate(angle);
    -ms-transform: rotate(angle);
    -o-transform: rotate(angle);
    transform: rotate(angle);

Type 'trf:sc' and expand the abbreviation. The output is

    -webkit-transform: scale(x, y);
    -ms-transform: scale(x, y);
    -o-transform: scale(x, y);
    transform: scale(x, y);

Type 'trf:t' and expand the abbreviation. The output is

    -webkit-transform: translate(x, y);
    -ms-transform: translate(x, y);
    -o-transform: translate(x, y);
    transform: translate(x, y);

Type 'trs' and expand the abbreviation. The output is

    -webkit-transition: prop time;
    -o-transition: prop time;
    transition: prop time;

Type 'trf:rx' and expand the abbreviation. The output is

    -webkit-transform: rotateX(angle);
    -ms-transform: rotateX(angle);
    -o-transform: rotateX(angle);
    transform: rotateX(angle);

Type 'trf:scy' and expand the abbreviation. The output is

    -webkit-transform: scaleY(y);
    -ms-transform: scaleY(y);
    -o-transform: scaleY(y);
    transform: scaleY(y);

Type 'trf:skx' and expand the abbreviation. The output is

    -webkit-transform: skewX(angle);
    -ms-transform: skewX(angle);
    -o-transform: skewX(angle);
    transform: skewX(angle);

Type 'trf:t3' and expand the abbreviation. The output is

    -webkit-transform: translate3d(tx, ty, tz);
    -ms-transform: translate3d(tx, ty, tz);
    -o-transform: translate3d(tx, ty, tz);
    transform: translate3d(tx, ty, tz);

Type 'trfo' and expand the abbreviation. The output is

    -webkit-transform-origin: ;
    -moz-transform-origin: ;
    -ms-transform-origin: ;
    -o-transform-origin: ;
    transform-origin: ;

Type 'trsde' and expand the abbreviation. The output is

    -webkit-transition-delay: time;
    -o-transition-delay: time;
    transition-delay: time;

Type 'trsp' and expand the abbreviation. The output is

    -webkit-transition-property: prop;
    -o-transition-property: prop;
    transition-property: prop;

Type 'stf' and expand the abbreviation. The output is

    -webkit-transition-timing-function: tfunc;
    -o-transition-timing-function: tfunc;
    transition-timing-function: tfunc;

Align –

There are different abbreviations for the Alignand some of them are listed below.

Type 'ac' and place the cursor at the end. Press the tab key or click on Expand Abbreviation from the Emmet menu. Then the abbreviation is expanded as shown below.

Example –
```
ac
```
Output –
Type 'ac:c' and expand the abbreviation. The output is align-content: center;
Type 'ai' and expand the abbreviation. The output is
```
    -ms-align-items: ;
    align-items: ;
```

Type 'ai:c' and expand the abbreviation. The output is

    -ms-align-items: center;
    align-items: center;

Type 'ac:fe' and expand the abbreviation. The output is align-content: flex-end;
Type 'ac:s' and expand the abbreviation. The output is align-content: stretch;
Type 'ac:sa' and expand the abbreviation. The output is align-content: space-around;

Type 'ai:b' and expand the abbreviation. The output is

    -ms-align-items: baseline;
    align-items: baseline;

Type 'ai:fs' and expand the abbreviation. The output is

    -ms-align-items: flex-start;
    align-items: flex-start;

Type 'ai:s' and expand the abbreviation. The output is

    -ms-align-items: stretch;
    align-items: stretch;

Type 'as' and expand the abbreviation. The output is
```
    -ms-align-self: ;
    align-self: ;
```
Type 'as:a' and expand the abbreviation. The output is
```
    -ms-align-self: auto;
    align-self: auto;
```

Back face –

There are different abbreviations for the Back faceand some of them are listed below.

Type 'bfv' and place the cursor at the end. Press the tab key or click on Expand Abbreviation from the Emmet menu. Then the abbreviation is expanded as shown below.

Example –
```
bfv
```
Output –

Type 'bfv:h' and expand the abbreviation. The output is

    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;

Type 'bfv:v' and expand the abbreviation. The output is

    -webkit-backface-visibility: visible;
    -moz-backface-visibility: visible;
    -ms-backface-visibility: visible;
    backface-visibility: visible;

Columns –

There are different abbreviations for the columnsand some of them are listed below.

Type 'colm' and place the cursor at the end. Press the tab key or click on Expand Abbreviation from the Emmet menu. Then the abbreviation is expanded as shown below.

Example –
```
colm
```
Output –

Type 'colmf' and expand the abbreviation. The output is

    -webkit-column-fill: ;
    -moz-column-fill: ;
    -o-column-fill: ;
    column-fill: ;

Type 'colmrw' and expand the abbreviation. The output is

    -webkit-column-rule-width: ;
    -moz-column-rule-width: ;
    -o-column-rule-width: ;
    column-rule-width: ;

Type 'colmg' and expand the abbreviation. The output is

    -webkit-column-gap: ;
    -moz-column-gap: ;
    -o-column-gap: ;
    column-gap: ;

Type 'colmr' and expand the abbreviation. The output is

    -webkit-column-rule: ;
    -moz-column-rule: ;
    -o-column-rule: ;
    column-rule: ;

Type 'colmrs' and expand the abbreviation. The output is

    -webkit-column-rule-style: ;
    -moz-column-rule-style: ;
    -o-column-rule-style: ;
    column-rule-style: ;

Type 'colms' and expand the abbreviation. The output is

    -webkit-column-span: ;
    -moz-column-span: ;
    -o-column-span: ;
    column-span: ;

Type 'colmw' and expand the abbreviation. The output is

    -webkit-column-width: ;
    -moz-column-width: ;
    -o-column-width: ;
    column-width: ;

Justify –

There are different abbreviations for the Justifyand some of them are listed below.

Type 'jc' and place the cursor at the end. Press the tab key or click on Expand Abbreviation from the Emmet menu. Then the abbreviation is expanded as shown below.

Example –
```
jc
```
Output –
Type 'jc:fe' and expand the abbreviation. The output is justify-content: flex-end;
Type 'jc:sa' and expand the abbreviation. The output is justify-content: space-around;
Type 'jc:c' and expand the abbreviation. The output is justify-content: center;
Type 'jc:fs' and expand the abbreviation. The output is justify-content: flex-start;
Type 'jc:sb' and expand the abbreviation. The output is justify-content: space-between;

Writing-mode –

There are different abbreviations for the writing-modeand some of them are listed below.

Type 'wm' and place the cursor at the end. Press the tab key or click on Expand Abbreviation from the Emmet menu. Then the abbreviation is expanded as shown below.

Example –
```
wm
```
Output –

Type 'wm:btl' and expand the abbreviation. The output is

    -webkit-writing-mode: bt-lr;
    -ms-writing-mode: bt-lr;
    writing-mode: bt-lr;

Type 'wm:btr' and expand the abbreviation. The output is

    -webkit-writing-mode: bt-rl;
    -ms-writing-mode: bt-rl;
    writing-mode: bt-rl;

Type 'wm:lrb' and expand the abbreviation. The output is

    -webkit-writing-mode: lr-bt;
    -ms-writing-mode: lr-bt;
    writing-mode: lr-bt;

Type 'wm:rlb' and expand the abbreviation. The output is

    -webkit-writing-mode: rl-bt;
    -ms-writing-mode: rl-bt;
    writing-mode: rl-bt;

Type 'wm:tbl' and expand the abbreviation. The output is

    -webkit-writing-mode: tb-lr;
    -ms-writing-mode: tb-lr;
    writing-mode: tb-lr;

Extras –

Type '!' and place the cursor at the end. Press the tab key or click on Expand Abbreviation from the Emmet menu. Then the abbreviation is expanded as shown below.

Example –
```
 !
```
Output –
Type '@f' and expand the abbreviation. The output is
```
@font-face {
    font-family:;
    src:url();
}
```

Type '@f+' and expand the abbreviation. The output is

@font-face {
    font-family: 'FontName';
    src: url('FileName.eot');
    src: url('FileName.eot?#iefix') format('embedded-opentype'),
         url('FileName.woff') format('woff'),
         url('FileName.ttf') format('truetype'),
         url('FileName.svg#FontName') format('svg');
    font-style: normal;
    font-weight: normal;
}

Type '@i / @import' and expand the abbreviation. The output is @import url();

Type '@kf' and expand the abbreviation. The output is

@-webkit-keyframes identifier {
    from {  }
    to {  }
}
@-o-keyframes identifier {
    from {  }
    to {  }
}
@-moz-keyframes identifier {
    from {  }
    to {  }
}
@keyframes identifier {
    from {  }
    to {  }
}