tutorialworld4u: Emmet Cheat sheet for faster Coding

Emmet (previously known as Zen Coding) is a web-developer’s toolkit that can greatly improve your HTML & CSS workflow:

Syntax

Child: >

nav>ul>li: <nav> <ul> <li></li> </ul> </nav>

Sibling: +

div+p+bq: <div></div> <p></p> <blockquote></blockquote>

Climb-up: ^

div+div>p>span+em^bq: <div></div> <div> <p><span></span><em></em></p> <blockquote></blockquote> </div>

div+div>p>span+em^^bq: <div></div> <div> <p><span></span><em></em></p> </div> <blockquote></blockquote>

Grouping: ()

div>(header>ul>li*2>a)+footer>p: <div> <header> <ul> <li><a href=””></a></li> <li><a href=””></a></li> </ul> </header> <footer> <p></p> </footer> </div>

(div>dl>(dt+dd)*3)+footer>p: <div> <dl> <dt></dt> <dd></dd> <dt></dt> <dd></dd> <dt></dt> <dd></dd> </dl> </div> <footer> <p></p> </footer>

Multiplication: *

ul>li*5: <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul>

Item numbering: $

ul>li.item$*5 <ul> <li class="item1"></li> <li class="item2"></li> <li class="item3"></li> <li class="item4"></li> <li class="item5"></li> </ul> h$[title=item$]Header $*3 <h1 title="item1">Header 1</h1> <h2 title="item2">Header 2</h2> <h3 title="item3">Header 3</h3> ul>li.item$$$*5 <ul> <li class="item001"></li> <li class="item002"></li> <li class="item003"></li> <li class="item004"></li> <li class="item005"></li> </ul> ul>li.item$@-*5 <ul> <li class="item5"></li> <li class="item4"></li> <li class="item3"></li> <li class="item2"></li> <li class="item1"></li> </ul> ul>li.item$@3*5 <ul> <li class="item3"></li> <li class="item4"></li> <li class="item5"></li> <li class="item6"></li> <li class="item7"></li> </ul>

ID and CLASS attributes

#header: <div id=”header”></div>

.title: <div class=”title”></div>

form#search.wide: <form id=”search” class=”wide”></form>

p.class1.class2.class3: <p class=”class1 class2 class3″></p>

Custom attributes

p[title="Hello world"]: <p title=”Hello world”></p>

td[rowspan=2 colspan=3 title]: <td rowspan=”2″ colspan=”3″ title=””></td>

[a='value1' b="value2"]: <div a=”value1″ b=”value2″></div>

Text:

aClick me: <a href=””>Click me</a>

p>Click +ahere+ to continue: <p>Click <a href=””>here</a> to continue</p>

Implicit tag names

.class: <div class=”class”></div>

em>.class: <em><span class=”class”></span></em>

ul>.class: <ul> <li class=”class”></li> </ul>

table>.row>.col: <table> <tr class=”row”> <td class=”col”></td> </tr> </table>

HTML

All unknown abbreviations will be transformed to tag, e.g. foo → <foo></foo>.

!

Alias of html:5

<!doctype html> <html lang=”en”> <head> <meta charset=”UTF-8″ /> <title>Document</title> </head> <body> </body> </html>

a: <a href=””></a>

a:link: <a href=”http://”></a>

a:mail: <a href=”mailto:”></a>

abbr: <abbr title=””></abbr>

acronym: <acronym title=””></acronym>

base: <base href=”” />

basefont: <basefont />

br: <br />

frame: <frame />

hr: <hr />

bdo: <bdo dir=””></bdo>

bdo:r: <bdo dir=”rtl”></bdo>

bdo:l: <bdo dir=”ltr”></bdo>

col: <col />

link: <link rel=”stylesheet” href=”” />

link:css: <link rel=”stylesheet” href=”style.css” />

link:print: <link rel=”stylesheet” href=”print.css” media=”print” />

link:favicon: <link rel=”shortcut icon” type=”image/x-icon” href=”favicon.ico” />

link:touch: <link rel=”apple-touch-icon” href=”favicon.png” />

link:rss: <link rel=”alternate” type=”application/rss+xml” title=”RSS” href=”rss.xml” />

link:atom: <link rel=”alternate” type=”application/atom+xml” title=”Atom” href=”atom.xml” />

meta: <meta />

meta:utf: <meta http-equiv=”Content-Type” content=”text/html;charset=UTF-8″ />

meta:win: <meta http-equiv=”Content-Type” content=”text/html;charset=windows-1251″ />

meta:vp: <meta name=”viewport” content=”width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0” />

meta:compat: <meta http-equiv=”X-UA-Compatible” content=”IE=7” />

style: <style></style>

script: <script></script>

script:src: <script src=””></script>

img: <img src=”” alt=”” />

iframe: <iframe src=”” frameborder=”0″></iframe>

embed: <embed src=”” type=”” />

object: <object data=”” type=””></object>

param: <param name=”” value=”” />

map: <map name=””></map>

area: <area shape=”” coords=”” href=”” alt=”” />

area:d: <area shape=”default” href=”” alt=”” />

area:c: <area shape=”circle” coords=”” href=”” alt=”” />

area:r: <area shape=”rect” coords=”” href=”” alt=”” />

area:p: <area shape=”poly” coords=”” href=”” alt=”” />

form: <form action=””></form>

form:get: <form action=”” method=”get”></form>

form:post: <form action=”” method=”post”></form>

label: <label for=””></label>

input: <input type=”text” />

inp: <input type=”text” name=”” id=”” />

input:hidden

Alias of input[type=hidden name]

input:h

Alias of input:hidden

input:text, input:t

Alias of inp

input:search

Alias of inp[type=search]

input:email

Alias of inp[type=email]

input:url

Alias of inp[type=url]

input:password

Alias of inp[type=password]

input:p

Alias of input:password

input:datetime

Alias of inp[type=datetime]

input:date

Alias of inp[type=date]

input:datetime-local

Alias of inp[type=datetime-local]

input:month

Alias of inp[type=month]

input:week

Alias of inp[type=week]

input:time

Alias of inp[type=time]

input:number

Alias of inp[type=number]

input:color

Alias of inp[type=color]

input:checkbox

Alias of inp[type=checkbox]

input:c

Alias of input:checkbox

input:radio

Alias of inp[type=radio]

input:r

Alias of input:radio

input:range

Alias of inp[type=range]

input:file

Alias of inp[type=file]

input:f

Alias of input:file

input:submit: <input type=”submit” value=”” />

input:s

Alias of input:submit

input:image: <input type=”image” src=”” alt=”” />

input:i

Alias of input:image

input:button: <input type=”button” value=”” />

input:b

Alias of input:button

isindex: <isindex />

input:reset

Alias of input:button[type=reset]

select: <select name=”” id=””></select>

option: <option value=””></option>

textarea: <textarea name=”” id=”” cols=”30” rows=”10“></textarea>

menu:context

Alias of menu[type=context]>

menu:c

Alias of menu:context

menu:toolbar

Alias of menu[type=toolbar]>

menu:t

Alias of menu:toolbar

video: <video src=””></video>

audio: <audio src=””></audio>

html:xml: <html xmlns=”http://www.w3.org/1999/xhtml”></html>

keygen: <keygen />

command: <command />

bq

Alias of blockquote

acr

Alias of acronym

fig

Alias of figure

figc

Alias of figcaption

ifr

Alias of iframe

emb

Alias of embed

obj

Alias of object

src

Alias of source

cap

Alias of caption

colg

Alias of colgroup

fst, fset

Alias of fieldset

btn

Alias of button

btn:b

Alias of button[type=button]

btn:r

Alias of button[type=reset]

btn:s

Alias of button[type=submit]

optg

Alias of optgroup

opt

Alias of option

tarea

Alias of textarea

leg

Alias of legend

sect

Alias of section

art

Alias of article

hdr

Alias of header

ftr

Alias of footer

adr

Alias of address

dlg

Alias of dialog

str

Alias of strong

prog

Alias of progress

datag

Alias of datagrid

datal

Alias of datalist

kg

Alias of keygen

out

Alias of output

det

Alias of details

cmd

Alias of command

doc

Alias of html>(head>meta[charset=UTF-8]+title$1:Document)+body

<html> <head> <meta charset=”UTF-8″ /> <title>Document</title> </head> <body> </body> </html>

doc4

Alias of html>(head>meta[http-equiv="Content-Type" content="text/html;charset=$charset"]+title$1:Document)+body

<html> <head> <meta http-equiv=”Content-Type” content=”text/html;charset=UTF-8″ /> <title>Document</title> </head> <body> </body> </html>

html:4t

Alias of !!!4t+doc4[lang=$lang]

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”> <html lang=”en”> <head> <meta http-equiv=”Content-Type” content=”text/html;charset=UTF-8″ /> <title>Document</title> </head> <body> </body> </html>

html:4s

Alias of !!!4s+doc4[lang=$lang]

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”> <html lang=”en”> <head> <meta http-equiv=”Content-Type” content=”text/html;charset=UTF-8″ /> <title>Document</title> </head> <body> </body> </html>

html:xt

Alias of !!!xt+doc4[xmlns=http://www.w3.org/1999/xhtml xml:lang=$lang]

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en”> <head> <meta http-equiv=”Content-Type” content=”text/html;charset=UTF-8″ /> <title>Document</title> </head> <body> </body> </html>

html:xs

Alias of !!!xs+doc4[xmlns=http://www.w3.org/1999/xhtml xml:lang=$lang]

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en”> <head> <meta http-equiv=”Content-Type” content=”text/html;charset=UTF-8″ /> <title>Document</title> </head> <body> </body> </html>

html:xxs

Alias of !!!xxs+doc4[xmlns=http://www.w3.org/1999/xhtml xml:lang=$lang]

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en”> <head> <meta http-equiv=”Content-Type” content=”text/html;charset=UTF-8″ /> <title>Document</title> </head> <body> </body> </html>

html:5

Alias of !!!+doc[lang=$lang]

<!doctype html> <html lang=”en”> <head> <meta charset=”UTF-8″ /> <title>Document</title> </head> <body> </body> </html>

ol+

Alias of ol>li

ul+

Alias of ul>li

dl+

Alias of dl>dt+dd

map+

Alias of map>area

table+

Alias of table>tr>td

colgroup+, colg+

Alias of colgroup>col

tr+

Alias of tr>td

select+

Alias of select>option

optgroup+, optg+

Alias of optgroup>option

!!!: <!doctype html>

!!!4t: <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>

!!!4s: <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>

!!!xt: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

!!!xs: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

!!!xxs: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>

c: <!– $child –>

cc:ie6: <!–[if lte IE 6]> $child <![endif]–>

cc:ie: <!–[if IE]> $child <![endif]–>

cc:noie: <!–[if !IE]><!–> $child <!–<![endif]–>

CSS

CSS module uses fuzzy search to find unknown abbreviations, e.g. ov:h == ov-h == ovh == oh.

If abbreviation wasn’t found, it is transformed into property name: foo-bar → foo-bar: |;

You can prefix abbreviations with hyphen to produce vendor-prefixed properties: -foo

Visual Formatting

pos: position:relative;

pos:s: position:static;

pos:a: position:absolute;

pos:r: position:relative;

pos:f: position:fixed;

t: top:;

t:a: top:auto;

r: right:;

r:a: right:auto;

b: bottom:;

b:a: bottom:auto;

l: left:;

l:a: left:auto;

z: z-index:;

z:a: z-index:auto;

fl: float:left;

fl:n: float:none;

fl:l: float:left;

fl:r: float:right;

cl: clear:both;

cl:n: clear:none;

cl:l: clear:left;

cl:r: clear:right;

cl:b: clear:both;

d: display:block;

d:n: display:none;

d:b: display:block;

d:i: display:inline;

d:ib: display:inline-block;

d:li: display:list-item;

d:ri: display:run-in;

d:cp: display:compact;

d:tb: display:table;

d:itb: display:inline-table;

d:tbcp: display:table-caption;

d:tbcl: display:table-column;

d:tbclg: display:table-column-group;

d:tbhg: display:table-header-group;

d:tbfg: display:table-footer-group;

d:tbr: display:table-row;

d:tbrg: display:table-row-group;

d:tbc: display:table-cell;

d:rb: display:ruby;

d:rbb: display:ruby-base;

d:rbbg: display:ruby-base-group;

d:rbt: display:ruby-text;

d:rbtg: display:ruby-text-group;

v: visibility:hidden;

v:v: visibility:visible;

v:h: visibility:hidden;

v:c: visibility:collapse;

ov: overflow:hidden;

ov:v: overflow:visible;

ov:h: overflow:hidden;

ov:s: overflow:scroll;

ov:a: overflow:auto;

ovx: overflow-x:hidden;

ovx:v: overflow-x:visible;

ovx:h: overflow-x:hidden;

ovx:s: overflow-x:scroll;

ovx:a: overflow-x:auto;

ovy: overflow-y:hidden;

ovy:v: overflow-y:visible;

ovy:h: overflow-y:hidden;

ovy:s: overflow-y:scroll;

ovy:a: overflow-y:auto;

ovs: overflow-style:scrollbar;

ovs:a: overflow-style:auto;

ovs:s: overflow-style:scrollbar;

ovs:p: overflow-style:panner;

ovs:m: overflow-style:move;

ovs:mq: overflow-style:marquee;

zoo, zm: zoom:1;

cp: clip:;

cp:a: clip:auto;

cp:r: clip:rect(top right bottom left);

rsz: resize:;

rsz:n: resize:none;

rsz:b: resize:both;

rsz:h: resize:horizontal;

rsz:v: resize:vertical;

cur: cursor:$pointer;

cur:a: cursor:auto;

cur:d: cursor:default;

cur:c: cursor:crosshair;

cur:ha: cursor:hand;

cur:he: cursor:help;

cur:m: cursor:move;

cur:p: cursor:pointer;

cur:t: cursor:text;

Margin & Padding

m: margin:;

m:a: margin:auto;

mt: margin-top:;

mt:a: margin-top:auto;

mr: margin-right:;

mr:a: margin-right:auto;

mb: margin-bottom:;

mb:a: margin-bottom:auto;

ml: margin-left:;

ml:a: margin-left:auto;

p: padding:;

pt: padding-top:;

pr: padding-right:;

pb: padding-bottom:;

pl: padding-left:;

Box Sizing

bxz: box-sizing:border-box;

bxz:cb: box-sizing:content-box;

bxz:bb: box-sizing:border-box;

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

bxsh:r: box-shadow:inset hoff voff blur spread rgb(0, 0, 0);

bxsh:ra: box-shadow:inset h v blur spread rgba(0, 0, 0, .5);

bxsh:n: box-shadow:none;

w: width:;

w:a: width:auto;

h: height:;

h:a: height:auto;

maw: max-width:;

maw:n: max-width:none;

mah: max-height:;

mah:n: max-height:none;

miw: min-width:;

mih: min-height:;

Font

f: font:;

f+: font:1em Arial,sans-serif;

fw: font-weight:;

fw:n: font-weight:normal;

fw:b: font-weight:bold;

fw:br: font-weight:bolder;

fw:lr: font-weight:lighter;

fs: font-style:$italic;

fs:n: font-style:normal;

fs:i: font-style:italic;

fs:o: font-style:oblique;

fv: font-variant:;

fv:n: font-variant:normal;

fv:sc: font-variant:small-caps;

fz: font-size:;

fza: font-size-adjust:;

fza:n: font-size-adjust:none;

ff: font-family:;

ff:s: font-family:serif;

ff:ss: font-family:sans-serif;

ff:c: font-family:cursive;

ff:f: font-family:fantasy;

ff:m: font-family:monospace;

ff:a: font-family: Arial, “Helvetica Neue”, Helvetica, sans-serif;

fef: font-effect:;

fef:n: font-effect:none;

fef:eg: font-effect:engrave;

fef:eb: font-effect:emboss;

fef:o: font-effect:outline;

fem: font-emphasize:;

femp: font-emphasize-position:;

femp:b: font-emphasize-position:before;

femp:a: font-emphasize-position:after;

fems: font-emphasize-style:;

fems:n: font-emphasize-style:none;

fems:ac: font-emphasize-style:accent;

fems:dt: font-emphasize-style:dot;

fems:c: font-emphasize-style:circle;

fems:ds: font-emphasize-style:disc;

fsm: font-smooth:;

fsm:a: font-smooth:auto;

fsm:n: font-smooth:never;

fsm:aw: font-smooth:always;

fst: font-stretch:;

fst:n: font-stretch:normal;

fst:uc: font-stretch:ultra-condensed;

fst:ec: font-stretch:extra-condensed;

fst:c: font-stretch:condensed;

fst:sc: font-stretch:semi-condensed;

fst:se: font-stretch:semi-expanded;

fst:e: font-stretch:expanded;

fst:ee: font-stretch:extra-expanded;

fst:ue: font-stretch:ultra-expanded;

Text

va: vertical-align:top;

va:sup: vertical-align:super;

va:t: vertical-align:top;

va:tt: vertical-align:text-top;

va:m: vertical-align:middle;

va:bl: vertical-align:baseline;

va:b: vertical-align:bottom;

va:tb: vertical-align:text-bottom;

va:sub: vertical-align:sub;

ta: text-align:left;

ta:l: text-align:left;

ta:c: text-align:center;

ta:r: text-align:right;

ta:j: text-align:justify;

ta-lst: text-align-last:;

tal:a: text-align-last:auto;

tal:l: text-align-last:left;

tal:c: text-align-last:center;

tal:r: text-align-last:right;

td: text-decoration:none;

td:n: text-decoration:none;

td:u: text-decoration:underline;

td:o: text-decoration:overline;

td:l: text-decoration:line-through;

te: text-emphasis:;

te:n: text-emphasis:none;

te:ac: text-emphasis:accent;

te:dt: text-emphasis:dot;

te:c: text-emphasis:circle;

te:ds: text-emphasis:disc;

te:b: text-emphasis:before;

te:a: text-emphasis:after;

th: text-height:;

th:a: text-height:auto;

th:f: text-height:font-size;

th:t: text-height:text-size;

th:m: text-height:max-size;

ti: text-indent:;

ti:-: text-indent:-9999px;

tj: text-justify:;

tj:a: text-justify:auto;

tj:iw: text-justify:inter-word;

tj:ii: text-justify:inter-ideograph;

tj:ic: text-justify:inter-cluster;

tj:d: text-justify:distribute;

tj:k: text-justify:kashida;

tj:t: text-justify:tibetan;

to: text-outline:;

to+: text-outline:0 0 #000;

to:n: text-outline:none;

tr: text-replace:;

tr:n: text-replace:none;

tt: text-transform:uppercase;

tt:n: text-transform:none;

tt:c: text-transform:capitalize;

tt:u: text-transform:uppercase;

tt:l: text-transform:lowercase;

tw: text-wrap:;

tw:n: text-wrap:normal;

tw:no: text-wrap:none;

tw:u: text-wrap:unrestricted;

tw:s: text-wrap:suppress;

tsh: text-shadow:hoff voff blur #000;

tsh:r: text-shadow:h v blur rgb(0, 0, 0);

tsh:ra: text-shadow:h v blur rgba(0, 0, 0, .5);

tsh+: text-shadow:0 0 0 #000;

tsh:n: text-shadow:none;

lh: line-height:;

lts: letter-spacing:;

whs: white-space:;

whs:n: white-space:normal;

whs:p: white-space:pre;

whs:nw: white-space:nowrap;

whs:pw: white-space:pre-wrap;

whs:pl: white-space:pre-line;

whsc: white-space-collapse:;

whsc:n: white-space-collapse:normal;

whsc:k: white-space-collapse:keep-all;

whsc:l: white-space-collapse:loose;

whsc:bs: white-space-collapse:break-strict;

whsc:ba: white-space-collapse:break-all;

wob: word-break:;

wob:n: word-break:normal;

wob:k: word-break:keep-all;

wob:l: word-break:loose;

wob:bs: word-break:break-strict;

wob:ba: word-break:break-all;

wos: word-spacing:;

wow: word-wrap:;

wow:nm: word-wrap:normal;

wow:n: word-wrap:none;

wow:u: word-wrap:unrestricted;

wow:s: word-wrap:suppress;

wow:b: word-wrap:break-word;

Background

bg: background:;

bg+: background:#fff url() 0 0 no-repeat;

bg:n: background:none;

bgc: background-color:#fff;

bgc:t: background-color:transparent;

bgi: background-image:url();

bgi:n: background-image:none;

bgr: background-repeat:;

bgr:n: background-repeat:no-repeat;

bgr:x: background-repeat:repeat-x;

bgr:y: background-repeat:repeat-y;

bgr:sp: background-repeat:space;

bgr:rd: background-repeat:round;

bga: background-attachment:;

bga:f: background-attachment:fixed;

bga:s: background-attachment:scroll;

bgp: background-position:0 0;

bgpx: background-position-x:;

bgpy: background-position-y:;

bgbk: background-break:;

bgbk:bb: background-break:bounding-box;

bgbk:eb: background-break:each-box;

bgbk:c: background-break:continuous;

bgcp: background-clip:padding-box;

bgcp:bb: background-clip:border-box;

bgcp:pb: background-clip:padding-box;

bgcp:cb: background-clip:content-box;

bgcp:nc: background-clip:no-clip;

bgo: background-origin:;

bgo:pb: background-origin:padding-box;

bgo:bb: background-origin:border-box;

bgo:cb: background-origin:content-box;

bgsz: background-size:;

bgsz:a: background-size:auto;

bgsz:ct: background-size:contain;

bgsz:cv: background-size:cover;

Color

c: color:#000;

c:r: color:rgb(0, 0, 0);

c:ra: color:rgba(0, 0, 0, .5);

op: opacity:;

Generated content

cnt: content:”;

cnt:n, ct:n: content:normal;

cnt:oq, ct:oq: content:open-quote;

cnt:noq, ct:noq: content:no-open-quote;

cnt:cq, ct:cq: content:close-quote;

cnt:ncq, ct:ncq: content:no-close-quote;

cnt:a, ct:a: content:attr();

cnt:c, ct:c: content:counter();

cnt:cs, ct:cs: content:counters();

ct: content:;

q: quotes:;

q:n: quotes:none;

q:ru: quotes:’\00AB’ ‘\00BB’ ‘\201E’ ‘\201C';

q:en: quotes:’\201C’ ‘\201D’ ‘\2018′ ‘\2019′;

coi: counter-increment:;

cor: counter-reset:;

Outline

ol: outline:;

ol:n: outline:none;

olo: outline-offset:;

olw: outline-width:;

ols: outline-style:;

olc: outline-color:#000;

olc:i: outline-color:invert;

Tables

tbl: table-layout:;

tbl:a: table-layout:auto;

tbl:f: table-layout:fixed;

cps: caption-side:;

cps:t: caption-side:top;

cps:b: caption-side:bottom;

ec: empty-cells:;

ec:s: empty-cells:show;

ec:h: empty-cells:hide;

Border

bd: border:;

bd+: border:1px solid #000;

bd:n: border:none;

bdbk: border-break:close;

bdbk:c: border-break:close;

bdcl: border-collapse:;

bdcl:c: border-collapse:collapse;

bdcl:s: border-collapse:separate;

bdc: border-color:#000;

bdc:t: border-color:transparent;

bdi: border-image:url();

bdi:n: border-image:none;

bdti: border-top-image:url();

bdti:n: border-top-image:none;

bdri: border-right-image:url();

bdri:n: border-right-image:none;

bdbi: border-bottom-image:url();

bdbi:n: border-bottom-image:none;

bdli: border-left-image:url();

bdli:n: border-left-image:none;

bdci: border-corner-image:url();

bdci:n: border-corner-image:none;

bdci:c: border-corner-image:continue;

bdtli: border-top-left-image:url();

bdtli:n: border-top-left-image:none;

bdtli:c: border-top-left-image:continue;

bdtri: border-top-right-image:url();

bdtri:n: border-top-right-image:none;

bdtri:c: border-top-right-image:continue;

bdbri: border-bottom-right-image:url();

bdbri:n: border-bottom-right-image:none;

bdbri:c: border-bottom-right-image:continue;

bdbli: border-bottom-left-image:url();

bdbli:n: border-bottom-left-image:none;

bdbli:c: border-bottom-left-image:continue;

bdf: border-fit:repeat;

bdf:c: border-fit:clip;

bdf:r: border-fit:repeat;

bdf:sc: border-fit:scale;

bdf:st: border-fit:stretch;

bdf:ow: border-fit:overwrite;

bdf:of: border-fit:overflow;

bdf:sp: border-fit:space;

bdlen: border-length:;

bdlen:a: border-length:auto;

bdsp: border-spacing:;

bds: border-style:;

bds:n: border-style:none;

bds:h: border-style:hidden;

bds:dt: border-style:dotted;

bds:ds: border-style:dashed;

bds:s: border-style:solid;

bds:db: border-style:double;

bds:dtds: border-style:dot-dash;

bds:dtdtds: border-style:dot-dot-dash;

bds:w: border-style:wave;

bds:g: border-style:groove;

bds:r: border-style:ridge;

bds:i: border-style:inset;

bds:o: border-style:outset;

bdw: border-width:;

bdt, bt: border-top:;

bdt+: border-top:1px solid #000;

bdt:n: border-top:none;

bdtw: border-top-width:;

bdts: border-top-style:;

bdts:n: border-top-style:none;

bdtc: border-top-color:#000;

bdtc:t: border-top-color:transparent;

bdr, br: border-right:;

bdr+: border-right:1px solid #000;

bdr:n: border-right:none;

bdrw: border-right-width:;

bdrst: border-right-style:;

bdrst:n: border-right-style:none;

bdrc: border-right-color:#000;

bdrc:t: border-right-color:transparent;

bdb, bb: border-bottom:;

bdb+: border-bottom:1px solid #000;

bdb:n: border-bottom:none;

bdbw: border-bottom-width:;

bdbs: border-bottom-style:;

bdbs:n: border-bottom-style:none;

bdbc: border-bottom-color:#000;

bdbc:t: border-bottom-color:transparent;

bdl, bl: border-left:;

bdl+: border-left:1px solid #000;

bdl:n: border-left:none;

bdlw: border-left-width:;

bdls: border-left-style:;

bdls:n: border-left-style:none;

bdlc: border-left-color:#000;

bdlc:t: border-left-color:transparent;

bdrs: border-radius:;

bdtrrs: border-top-right-radius:;

bdtlrs: border-top-left-radius:;

bdbrrs: border-bottom-right-radius:;

bdblrs: border-bottom-left-radius:;

Lists

lis: list-style:;

lis:n: list-style:none;

lisp: list-style-position:;

lisp:i: list-style-position:inside;

lisp:o: list-style-position:outside;

list: list-style-type:;

list:n: list-style-type:none;

list:d: list-style-type:disc;

list:c: list-style-type:circle;

list:s: list-style-type:square;

list:dc: list-style-type:decimal;

list:dclz: list-style-type:decimal-leading-zero;

list:lr: list-style-type:lower-roman;

list:ur: list-style-type:upper-roman;

lisi: list-style-image:;

lisi:n: list-style-image:none;

Print

pgbb: page-break-before:;

pgbb:au: page-break-before:auto;

pgbb:al: page-break-before:always;

pgbb:l: page-break-before:left;

pgbb:r: page-break-before:right;

pgbi: page-break-inside:;

pgbi:au: page-break-inside:auto;

pgbi:av: page-break-inside:avoid;

pgba: page-break-after:;

pgba:au: page-break-after:auto;

pgba:al: page-break-after:always;

pgba:l: page-break-after:left;

pgba:r: page-break-after:right;

orp: orphans:;

wid: widows:;

Others

!: !important

@f: @font-face font-family:; src:url(

@f+: @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;

@i, @import: @import url();

@kf: @-webkit-keyframes identifier from to @-o-keyframes identifier from to @-moz-keyframes identifier from to @keyframes identifier from to

@m, @media: @media screen

anim: animation:;

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

animdel: animation-delay:time;

animdir: animation-direction:normal;

animdir:a: animation-direction:alternate;

animdir:ar: animation-direction:alternate-reverse;

animdir:n: animation-direction:normal;

animdir:r: animation-direction:reverse;

animdur: animation-duration:0s;

animfm: animation-fill-mode:both;

animfm:b: animation-fill-mode:backwards;

animfm:bt, animfm:bh: animation-fill-mode:both;

animfm:f: animation-fill-mode:forwards;

animic: animation-iteration-count:1;

animic:i: animation-iteration-count:infinite;

animn: animation-name:none;

animps: animation-play-state:running;

animps:p: animation-play-state:paused;

animps:r: animation-play-state:running;

animtf: animation-timing-function:linear;

animtf:cb: animation-timing-function:cubic-bezier(0.1, 0.7, 1.0, 0.1);

animtf:e: animation-timing-function:ease;

animtf:ei: animation-timing-function:ease-in;

animtf:eio: animation-timing-function:ease-in-out;

animtf:eo: animation-timing-function:ease-out;

animtf:l: animation-timing-function:linear;

ap: appearance:$none;

bg:ie: filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’x.png’,sizingMethod=’crop‘);

cm: /* $child */

colm: columns:;

colmc: column-count:;

colmf: column-fill:;

colmg: column-gap:;

colmr: column-rule:;

colmrc: column-rule-color:;

colmrs: column-rule-style:;

colmrw: column-rule-width:;

colms: column-span:;

colmw: column-width:;

mar: max-resolution:res;

mir: min-resolution:res;

op:ie: filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);

op:ms: -ms-filter:’progid:DXImageTransform.Microsoft.Alpha(Opacity=100)';

ori: orientation:;

ori:l: orientation:landscape;

ori:p: orientation:portrait;

tov: text-overflow:$ellipsis;

tov:c: text-overflow:clip;

tov:e: text-overflow:ellipsis;

trf: transform:;

trf:r: transform: rotate(angle);

trf:sc: transform: scale(x, y);

trf:scx: transform: scaleX(x);

trf:scy: transform: scaleY(y);

trf:skx: transform: skewX(angle);

trf:sky: transform: skewY(angle);

trf:t: transform: translate(x, y);

trf:tx: transform: translateX(x);

trf:ty: transform: translateY(y);

trfo: transform-origin:;

trfs: transform-style:preserve-3d;

trs: transition:prop time;

trsde: transition-delay:time;

trsdu: transition-duration:time;

trsp: transition-property:prop;

trstf: transition-timing-function:tfunc;

us: user-select:$none;

wfsm: -webkit-font-smoothing:$antialiased;

wfsm:a: -webkit-font-smoothing:antialiased;

wfsm:n: -webkit-font-smoothing:none;

wfsm:s, wfsm:sa: -webkit-font-smoothing:subpixel-antialiased;

XSL

tm: <xsl:template match=”” mode=””></xsl:template>

tmatch

Alias of tm

<xsl:template match=”” mode=””></xsl:template>

tn: <xsl:template name=””></xsl:template>

tname

Alias of tn

<xsl:template name=””></xsl:template>

call: <xsl:call-template name=”” />

ap: <xsl:apply-templates select=”” mode=”” />

api: <xsl:apply-imports />

imp: <xsl:import href=”” />

inc: <xsl:include href=”” />

ch: <xsl:choose></xsl:choose>

xsl:when: <xsl:when test=””></xsl:when>

wh

Alias of xsl:when

<xsl:when test=””></xsl:when>

ot: <xsl:otherwise></xsl:otherwise>

if: <xsl:if test=””></xsl:if>

Emmet Cheat sheet for faster Coding

tutorialworld4u

Thursday, September 18, 2014