Using Emmet's CSS Abbreviations
Emmet's powerful abbreviation system extends far beyond HTML markup into the realm of CSS development. These intelligent shortcuts transform the way professional developers write stylesheets, dramatically reducing keystrokes while maintaining code accuracy. The workflow remains elegantly simple: type your abbreviation, press Tab, and watch as Emmet expands it into complete CSS declarations. For a comprehensive reference of all available shortcuts, consult Emmet's official documentation at docs.Emmet.io/cheat-sheet.
The examples below demonstrate some of the most valuable CSS abbreviations that every developer should master. Emmet's logic is intuitive—most abbreviations derive from the initial letters of CSS properties or their values, creating memorable patterns that become second nature with practice.
How to Use Emmet CSS Abbreviations
Type the abbreviation
Enter the short code based on property names or first letters
Press Tab
The abbreviation expands into full CSS code automatically
Fill in values
Use Tab to jump between placeholder values and customize them
p
padding: ;When specifying units like percentages, do not include hyphens as separators. Hyphens would create negative values instead.
pt
padding-top: ;m
margin: ;How to Use Emmet CSS Abbreviations
Type the abbreviation
Enter the short code based on property names or first letters
Press Tab
The abbreviation expands into full CSS code automatically
Fill in values
Use Tab to jump between placeholder values and customize them
mt
margin-top: ;These basic property shortcuts provide the foundation for more sophisticated abbreviations. Notice how Emmet positions your cursor within the value area, ready for immediate input.
tac
text-align: center;dib
display: inline-block;Moving beyond basic properties, Emmet truly shines when handling values and units. The following examples showcase how to embed measurements directly into your abbreviations:
Common CSS Property Abbreviations
Spacing Properties
Padding and margin shortcuts like 'p' for padding and 'm' for margin. Add directional suffixes like 't' for top.
Text Properties
Text alignment and display properties such as 'tac' for text-align center and 'dib' for display inline-block.
m20
margin: 20px;When no unit is specified in Emmet abbreviations, pixels (px) are automatically assumed as the default unit.
m20% (or m20p)
margin: 20%;m20-40
margin: 20px 40px;NOTE: When no unit is specified, Emmet defaults to pixels—the most commonly used unit in web development.
When no unit is specified in Emmet abbreviations, pixels (px) are automatically assumed as the default unit.
m20p40p
margin: 20% 40%;IMPORTANT: When specifying unit types (such as % or p for percentage), omit the hyphen separator. Including a hyphen would instruct Emmet to generate negative values instead of multiple positive values.
When specifying units like percentages, do not include hyphens as separators. Hyphens would create negative values instead.
fz2e
font-size: 2em;Color and visual property abbreviations offer particularly powerful time-saving opportunities in modern CSS workflows:
Unit Types in Emmet
| Feature | With Unit | Without Unit |
|---|---|---|
| Margin 20 | m20p = margin: 20% | m20 = margin: 20px |
| Font Size 2 | fz2e = font-size: 2em | fz2 = font-size: 2px |
bg
background: #000;bd
border: 1px solid #000;c
color: #000;How to Use Emmet CSS Abbreviations
Type the abbreviation
Enter the short code based on property names or first letters
Press Tab
The abbreviation expands into full CSS code automatically
Fill in values
Use Tab to jump between placeholder values and customize them
cr
color: rgb(0, 0, 0);PRO TIP: After expanding rgb abbreviations, press Tab to cycle through each color value—a huge efficiency boost when fine-tuning colors.
Color and Visual Properties
Background & Border
Quick shortcuts for styling elements with 'bg' for background and 'bd' for border properties.
Color Variations
Multiple color formats available including basic color, RGB, and RGBA with different levels of control.
cra
color: rgba(0, 0, 0, .5);PRO TIP: The Tab navigation works seamlessly with rgba values as well, allowing you to quickly adjust red, green, blue, and alpha channels in sequence.
Advanced layout and visual effect properties round out Emmet's comprehensive CSS toolkit:
Color and Visual Properties
Background & Border
Quick shortcuts for styling elements with 'bg' for background and 'bd' for border properties.
Color Variations
Multiple color formats available including basic color, RGB, and RGBA with different levels of control.
poa
position: absolute;After expanding abbreviations with multiple values like RGB colors or box-shadow properties, use Tab to jump between different value placeholders for efficient editing.
bxsh
box-shadow: inset hoff voff blur #000;ADVANCED TIP: Complex properties like box-shadow showcase Emmet's sophisticated templating system. After expansion, use Tab to navigate between placeholder values. When multiple instances of the same value appear (like color codes), Emmet intelligently highlights them simultaneously—type once, update everywhere.
Emmet CSS Mastery Checklist
Focus on frequently used properties like margin, padding, and display
Learn when to use hyphens vs unit letters for different value types
Use Tab to efficiently move between and edit multiple values
Keep docs.Emmet.io/cheat-sheet bookmarked for comprehensive abbreviation lists
Both sets of values will be highlighted so you only have to type them once