Demystify the usage of CSS abbreviations with Emmet through this tutorial, offering a detailed breakdown and practical examples.
This exercise is excerpted from Noble Desktop’s front-end web development (Emmet coding tips) training materials and is compatible with updates through 2022. To continue learning web development with hands-on training, check out our coding bootcamps in NYC and live online.
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!
