diff --git a/tools/emmet.md b/tools/emmet.md
index 64f6b52..200cb25 100644
--- a/tools/emmet.md
+++ b/tools/emmet.md
@@ -14,7 +14,7 @@ You can use Emmet in two ways:
 
 __This cheatsheet will assume that you press `Tab` after each expressions.__
 
-## Basics
+## HTML
 
 ### Generating  HTML 5 DOCTYPE
 `html:5`
@@ -215,3 +215,68 @@ To start the numbering from specific number, use this way
   </ul>
 </div>
 ```
+
+
+## CSS
+
+Emmet works surprisingly well with css as well.
+
+* `f:l`
+
+```css
+float: left;
+```
+
+You can also use any options n/r/l
+
+* `pos:a­`
+
+```css
+position: absolute;
+```
+
+Also use any options, pos:a/r/f
+
+* `d:n/b­/f/­i/ib`
+
+`d:ib`
+
+```css
+display: inline-block;
+```
+
+* You can use `m` for margin and `p` for padding followed by direction
+
+`mr` -> `margin-right`
+
+`pr` -> `padding-right`
+
+* `@f` will result in
+
+```css
+@font-face {
+  font-family:;
+  src:url();
+}
+```
+
+You can also use these shorthands
+
+| Shorthand      | Description |
+| ----------- | ----------- |
+| z      | z-index       |
+| w      | width       |
+| h      | height       |
+| fz   | font-size        |
+| ff   | font-family        |
+| fw   | font-weight        |
+| @lh   | line-height        |
+| maw   | max-width        |
+| mah   | max-height        |
+| miw   | min-width        |
+| mih   | min-width        |
+| !   | !important        |
+| @f   | font-face        |
+| @op   | opacity        |
+| @lh   | line-height        |
+| @op   | opacity        |