Skip to main content
March 23, 2026Dan Rodney/2 min read

Topic 3C: Emmet: CSS Abbreviations

Master CSS abbreviations for lightning-fast coding productivity

Productivity Boost

Emmet's CSS abbreviations can reduce the time spent typing repetitive CSS properties by expanding short codes into full declarations with a simple Tab press.

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

1

Type the abbreviation

Enter the short code based on property names or first letters

2

Press Tab

The abbreviation expands into full CSS code automatically

3

Fill in values

Use Tab to jump between placeholder values and customize them

p

padding: ;
Unit Specification Rules

When specifying units like percentages, do not include hyphens as separators. Hyphens would create negative values instead.

Tab Navigation Feature

After expanding abbreviations with multiple values like RGB colors or box-shadow properties, use Tab to jump between different value placeholders for efficient editing.

pt

padding-top: ;

m

margin: ;

How to Use Emmet CSS Abbreviations

1

Type the abbreviation

Enter the short code based on property names or first letters

2

Press Tab

The abbreviation expands into full CSS code automatically

3

Fill in values

Use Tab to jump between placeholder values and customize them

Default Unit Assumption

When no unit is specified in Emmet abbreviations, pixels (px) are automatically assumed as the default unit.

Unit Specification Rules

When specifying units like percentages, do not include hyphens as separators. Hyphens would create negative values instead.

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;
Default Unit Assumption

When no unit is specified in Emmet abbreviations, pixels (px) are automatically assumed as the default unit.

Unit Specification Rules

When specifying units like percentages, do not include hyphens as separators. Hyphens would create negative values instead.

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.

Default Unit Assumption

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.

Unit Specification Rules

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

FeatureWith UnitWithout Unit
Margin 20m20p = margin: 20%m20 = margin: 20px
Font Size 2fz2e = font-size: 2emfz2 = font-size: 2px
Recommended: Specify units explicitly for better control over your CSS values

bg

background: #000;

bd

border: 1px solid #000;

c

color: #000;

How to Use Emmet CSS Abbreviations

1

Type the abbreviation

Enter the short code based on property names or first letters

2

Press Tab

The abbreviation expands into full CSS code automatically

3

Fill in values

Use Tab to jump between placeholder values and customize them

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.

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;
Tab Navigation Feature

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

0/4
“
Both sets of values will be highlighted so you only have to type them once
Emmet's smart value duplication feature saves additional time when working with complex properties like box-shadow.

Key Takeaways

1Emmet provides extensive CSS abbreviations beyond HTML, accessible through the official cheat sheet at docs.Emmet.io/cheat-sheet
2CSS abbreviations follow intuitive patterns based on first letters of properties and values, making them easy to remember
3The Tab key expands abbreviations and navigates between placeholder values for efficient editing workflow
4Default unit assumption is pixels when no unit is specified, but explicit units can be added using letter suffixes
5Hyphen separators should be avoided when specifying units to prevent creating negative values
6Color properties support multiple formats including basic hex, RGB, and RGBA with automatic placeholder generation
7Complex properties like box-shadow include helpful features such as value highlighting and duplication
8Mastering these abbreviations significantly reduces typing time and improves CSS coding productivity

RELATED ARTICLES