Brackets Emmet CSS

Brackets Emmet Cheatsheet for CSS

In CSS, there is a fuzzy search to find the nearest matching property.

For Example:
Type pos and press the ‘Tab’ key in your keyboard. It will convert to “position: relative;“.

Similarly, pos:r will convert to “position: relative;“.

Consider another Example:
fl:n will expand to “float: none;” while fl:r will expand to “float: right;“​

So, the idea is not to remember all the short abbreviations, rather guess the possible abbreviation.

This means that “d:tbcl” will expand to “display: table-column;“. If you do not remember this abbreviation, you can try  like “d:tbl” and this will also expand to “display: table-column;” due to fuzzy search.

Another example:
ovy:s” will expand to – “overflow-y: scroll;

but it is not mandatory to remember this abbreviation. You can  simply play a mental game until you master this process.

This means, you can think of the main alphabets(which has more stress while speaking) like – o, v, r, f, y & s so you should try combining some or all of them like “ovrfys“, “ovry:s” or “ovys” and these will also convert to: “overflow-y: scroll;“.

If you do not get the expected output, try changing some of the alphabets.

Initially, you might feel that you are not getting it correct but once you start practicing, you will get the result in couple of days.

We are going to show some of the important abbreviations for CSS while using Emmet-

Margin & Padding

Try the first letter of each word like –

  • m margin: ;
  • To code margin:auto, just type m:a followed by the ‘Tab’ key.
  • For “margin-top:auto“, simply type mt:a
  • To code “padding“, type “p“.
  • To code “padding-bottom:;“, simply type “pb“.

In the same way, you can expand the abbreviations for the remaining margin & padding properties. 

Box sizing

bxz” will expand to
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
If you forget this abbreviation, you can type “bsz:bb” and it will convert to the same output.


  • f -> “font: ;
  • Similarly, “ff:t” -> “font-family: “Times New Roman”, Times, Baskerville, Georgia, serif;
  • ff:s” -> “font-family: serif;
  • ff” -> “font-family: ;


  • va -> “vertical-align: top;
  • va:t” -> “vertical-align: top;
  • ta -> “text-align: left;
  • lh -> “line-height: ;


  • bg -> “background: #000;
  • bg+ -> “background: #fff url() 0 0 no-repeat;


  • c -> “color: #000;
  • c:r -> “color: rgb(0, 0, 0);

Generated content

cnt -> “content: ”;


ol -> “outline: ;
ol:n -> “outline: none;


tbl -> “table-layout: ;


bd -> “border: ;
bd+ -> “border: 1px solid #000;


lis -> “list-style: ;


pgbb -> “page-break-before: ;

Media Query

@m/@media ->
@media screen {



anim ->
-webkit-animation: ;
-o-animation: ;
animation: ;

anim-    ->
-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;


fx ->
-webkit-flex: ;
-moz-flex: ;
-ms-flex: ;
-o-flex: ;
flex: ;

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

Transform & Transition

trf ->
-webkit-transform: ;
-ms-transform: ;
-o-transform: ;
transform: ;

trf:r ->
-webkit-transform: rotate(angle);
-ms-transform: rotate(angle);
-o-transform: rotate(angle);
transform: rotate(angle);

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


! -> “!important

@f ->
@font-face {

Tutorials for all brains!