Skip to main content
Dan Rodney/2 min read

Topic 3C: Emmet: CSS Abbreviations

Build a Web Page

1

Mark Up Structure

Semantic HTML first — header, nav, main, footer.

2

Style Layout

Flexbox for one-dimensional, Grid for two-dimensional layouts.

3

Style Components

Buttons, cards, forms — reusable design system pieces.

4

Responsive Tweaks

Media queries for tablet and mobile breakpoints.

Master HTML & CSS at Noble Desktop

Noble Desktop's Full-Stack Web Development Certificate teaches HTML, CSS, and JavaScript — the complete front-end foundation.

Demystify the usage of CSS abbreviations with Emmet through this tutorial, offering a detailed breakdown and practical examples.

Using Emmet’s CSS Abbreviations

Emmet’s abbreviations are not just for HTML. Emmet has a lot of abbreviations for CSS code too! Once again, you type an abbreviation, then hit Tab to expand the abbreviation into the full CSS code. Emmet’s Cheat Sheet has a complete list of the abbreviations: docs.Emmet.io/cheat-sheet

Below are examples of some useful abbreviations and the code they expand into after you hit Tab. Many are based on the first letter of a property (or the first letter of the words used in the property and value).

p

padding: ;

pt

padding-top: ;

m

margin: ;

mt

margin-top: ;

tac

text-align: center;

dib

display: inline-block;

m20

margin: 20px;

m20% (or m20p)

margin: 20%;

m20-40

margin: 20px 40px;

NOTE: If no unit is specified, pixels are assumed.

m20p40p

margin: 20% 40%;

NOTE: If you specify the type of unit (such as %, p) don’t include a hyphen (-) separator. Adding a hyphen separator would give you negative values.

fz2e

font-size: 2em;

bg

background:,000;

bd

border: 1px solid,000;

c

color:,000;

cr

color: rgb(0,0, 0);

TIP: After expanding the abbreviation, hit Tab to jump between the rgb values!

cra

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

TIP: After expanding the abbreviation, hit Tab to jump between the rgb values!

poa

position: absolute;

bxsh

box-shadow: inset hoff voff blur,000;

TIP: After expanding the abbreviation, hit Tab to jump between the various values. Both sets of values will be highlighted so you only have to type them once!