VS Code CSS Shorthand (Emmet) — Complete Guide with Tips

VS Code CSS Shorthand with Emmet — Write CSS 10× Faster!

Hello friend! Writing CSS manually property by property (like typing display: flex; justify-content: center; align-items: center;) takes a lot of time and keystrokes.

Did you know VS Code has built-in Emmet for CSS? You can type short abbreviations like df + Tab, jcc + Tab, and aic + Tab to generate full CSS declarations instantly!

In this guide, we will learn all essential CSS Emmet shorthands, unit tricks, flexbox/grid abbreviations, cheat sheet, and pro tips in VS Code.

💡 Emmet is built into VS Code out of the box — no extra plugin required!

If you want to explore more CSS and HTML guides:

How CSS Emmet Works in VS Code

In CSS, Emmet uses property initials + values.

When you type an abbreviation in a .css, .scss, .less, or <style> block and press Tab or Enter, VS Code expands it automatically.

Key Rules of CSS Emmet:

Property initials: d → display: ;, m → margin: ;, p → padding: ;, c → color: ;.
Value appending: Add numbers directly after letters: m10 → margin: 10px;.
Default unit is px: w300 → width: 300px;.
Custom units: Use p for %, e for em, r for rem, vh for vh, vw for vw.
- w100p → width: 100%;
- fz1.5r → font-size: 1.5rem;
- h100vh → height: 100vh;
Multiple values: Use hyphens - to separate values:
- m10-20 → margin: 10px 20px;
- p10-20-30-40 → padding: 10px 20px 30px 40px;

1. Display & Position Shorthands

Display Properties

Shorthand	Expands To	Description
`db`	`display: block;`	Block display
`dn`	`display: none;`	Hide element
`di`	`display: inline;`	Inline display
`dib`	`display: inline-block;`	Inline block
`df`	`display: flex;`	Flexbox container
`dif`	`display: inline-flex;`	Inline flex container
`dg`	`display: grid;`	Grid container

Position Properties

Shorthand	Expands To	Description
`pos:a` or `poa`	`position: absolute;`	Absolute positioning
`pos:r` or `por`	`position: relative;`	Relative positioning
`pos:f` or `pof`	`position: fixed;`	Fixed positioning
`pos:s` or `pos`	`position: sticky;`	Sticky positioning
`t0`	`top: 0;`	Top offset
`r0`	`right: 0;`	Right offset
`b0`	`bottom: 0;`	Bottom offset
`l0`	`left: 0;`	Left offset
`z10`	`z-index: 10;`	Z-index stack layer

💡 Pro Shortcut: Type pos:a+t0+l0 and press Tab to expand position absolute with top 0 and left 0 all at once!

2. Box Model Shorthands (Margin, Padding, Width, Height)

Margin & Padding

Shorthand	Expands To
`m0`	`margin: 0;`
`m10`	`margin: 10px;`
`m10-20`	`margin: 10px 20px;`
`m0-auto`	`margin: 0 auto;` (Center block element)
`mt10`	`margin-top: 10px;`
`mr15`	`margin-right: 15px;`
`mb20`	`margin-bottom: 20px;`
`ml5`	`margin-left: 5px;`
`p0`	`padding: 0;`
`p15-30`	`padding: 15px 30px;`
`pt20`	`padding-top: 20px;`
`pb20`	`padding-bottom: 20px;`

Width & Height

Shorthand	Expands To
`w100p`	`width: 100%;`
`w300`	`width: 300px;`
`w100vw`	`width: 100vw;`
`h100p`	`height: 100%;`
`h100vh`	`height: 100vh;`
`mw100p`	`max-width: 100%;`
`mah500`	`max-height: 500px;`

Box Sizing

Shorthand	Expands To
`bxz` or `bxz:bb`	`box-sizing: border-box;`
`bxz:cb`	`box-sizing: content-box;`

3. Typography & Text Formatting

Shorthand	Expands To	Description
`fz16`	`font-size: 16px;`	Font size in px
`fz1.2r`	`font-size: 1.2rem;`	Font size in rem
`fwb`	`font-weight: bold;`	Bold text
`fwn`	`font-weight: normal;`	Normal weight
`fw700`	`font-weight: 700;`	Numeric weight
`lh1.5`	`line-height: 1.5;`	Line height ratio
`tac`	`text-align: center;`	Center align text
`tal`	`text-align: left;`	Left align text
`tar`	`text-align: right;`	Right align text
`tdn`	`text-decoration: none;`	Remove underline from links
`tdu`	`text-decoration: underline;`	Underline text
`ttu`	`text-transform: uppercase;`	Uppercase text
`ttc`	`text-transform: capitalize;`	Capitalize text
`wsnw`	`white-space: nowrap;`	Prevent text wrap
`lts1`	`letter-spacing: 1px;`	Letter spacing

4. Colors & Backgrounds

Shorthand	Expands To
`c#fff`	`color: #fff;`
`c#333`	`color: #333;`
`c:r`	`color: red;`
`bg`	`background: #fff;`
`bgc#f5f5f5`	`background-color: #f5f5f5;`
`bgi`	`background-image: url();`
`bgr:n`	`background-repeat: no-repeat;`
`bgsz:c`	`background-size: cover;`
`bgp:c`	`background-position: center;`

💡 Tip: Type bg#3b82f6 to generate background: #3b82f6; directly without typing property or hash symbol separately!

5. Flexbox Shorthands

Flexbox alignment is one of the most frequently typed CSS code blocks. Master these to save huge time:

Shorthand	Expands To
`df`	`display: flex;`
`jcc`	`justify-content: center;`
`jc:sb`	`justify-content: space-between;`
`jc:sa`	`justify-content: space-around;`
`jc:fe`	`justify-content: flex-end;`
`aic`	`aic` → `align-items: center;`
`aifs`	`align-items: flex-start;`
`aife`	`align-items: flex-end;`
`fxd:c`	`flex-direction: column;`
`fxw:w`	`flex-wrap: wrap;`
`fx1`	`flex: 1 1 0%;`

Ultimate Flexbox Centering Trick

To center anything horizontally and vertically with flexbox:

Type this:

df+jcc+aic

Expands to:

display: flex;
justify-content: center;
align-items: center;

6. CSS Grid Shorthands

Shorthand	Expands To
`dg`	`display: grid;`
`gtc`	`grid-template-columns: ;`
`gtr`	`grid-template-rows: ;`
`gg10` or `g10`	`gap: 10px;`
`rg15`	`row-gap: 15px;`
`cg20`	`column-gap: 20px;`
`ji:c`	`justify-items: center;`
`ai:c`	`align-items: center;`

7. Borders & Shadows

Shorthand	Expands To
`bd`	`border: 1px solid #000;`
`bd:n`	`border: none;`
`bd1-solid-ccc`	`border: 1px solid #ccc;`
`bdr10`	`border-radius: 10px;`
`bdrs50p`	`border-radius: 50%;` (Make circular element)
`bxsh`	`box-shadow: inset h v blur spread color;`
`ol:n`	`outline: none;`

8. Transitions & Transforms

Shorthand	Expands To
`trn`	`transition: prop time type;`
`trn.3s`	`transition: all .3s;`
`trf`	`transform: ;`
`trf:s`	`transform: scale(x, y);`
`trf:r`	`transform: rotate(angle);`
`trf:t`	`transform: translate(x, y);`
`op1`	`opacity: 1;`
`op0.5`	`opacity: 0.5;`
`cur:p`	`cursor: pointer;`

9. Comprehensive CSS Emmet Cheat Sheet

Here is a quick reference table of the most essential CSS Emmet abbreviations:

Category	Shorthand	Resulting CSS
Reset	`* { m0+p0+bxz }`	Universal reset rule
Center Flex	`df+jcc+aic`	Flex center horizontal & vertical
Center Grid	`dg+ji:c+ai:c`	Grid center horizontal & vertical
Dimensions	`w100p+h100vh`	Full screen container
Margin/Padding	`m0-auto` / `p15-20`	Auto centering / responsive padding
Text	`tac+fz18+fwb+lh1.5`	Styled centered heading
Link Reset	`tdn+c#2563eb+cur:p`	Styled clean anchor link
Circle Avatar	`w50+h50+bdrs50p`	50px round avatar image
Card Shadow	`bdr8+bxsh`	Rounded box with shadow

10. Pro Tips for VS Code CSS Productivity

Tip 1: Chain Multiple CSS Rules with `+`

You don't need to press Tab for every single line! Chain multiple properties together with + on a single line:

Type this:

w100p+maxw1200+m0-auto+p20

Press Tab → Expands to:

width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 20px;

Tip 2: Use Built-In Color Picker

When you hover your mouse over any HEX, RGB, or HSL color code in VS Code, an interactive Color Picker popup appears. You can visually pick colors and switch formats (HEX ↔ RGB ↔ HSL) easily!

Tip 3: Format CSS on Save with Prettier

Ensure your CSS properties are properly indented and formatted by adding this to your .vscode/settings.json:

{
  "editor.formatOnSave": true,
  "css.format.enable": true,
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

Tip 4: Hover & Peek Definition for Classes

Press Ctrl (or Cmd on Mac) and hover over any CSS class or HTML tag in your workspace to peek or jump straight to its definition across files!

Tip 5: Enable CSS Emmet in Tailwind & Styled-Components

If you use React (JSX/TSX) or Vue, make sure Emmet works inside style blocks and string literals by adding this to settings.json:

{
  "emmet.includeLanguages": {
    "javascript": "html",
    "javascriptreact": "html",
    "typescriptreact": "html",
    "postcss": "css"
  }
}

Summary — Top 10 Most Useful CSS Emmet Shorthands

df → display: flex;
jcc → justify-content: center;
aic → align-items: center;
pos:a → position: absolute;
m0-auto → margin: 0 auto;
w100p → width: 100%;
h100vh → height: 100vh;
tac → text-align: center;
tdn → text-decoration: none;
cur:p → cursor: pointer;

📚 Read More CSS & HTML Tutorials

Continue learning with our full collection of web development guides:

⚡ VS Code HTML Shorthand (Emmet) Guide
📋 CSS Cheat Sheet with Code Examples
🏆 CSS Tips and Tricks with Examples
🖼️ CSS Background Image with Opacity & Transparency
🎨 CSS Preprocessor SASS Guide
🛠️ Best VS Code Extensions for HTML & CSS

Happy styling! 🎉 Master these Emmet CSS shorthands to code stylesheets at lighting speed!