Skip to content
CPSC-1520-DG

Discover Emmet in VS Code

Are you looking to increase your productivity in HTML and CSS? Then spend some time learning Emmet! In this tutorial, we’ll explore how to use Emmet in VS Code to quickly generate both HTML and CSS.

Quickly Scaffold Your HTML

Scaffolding is something used in construction to aid in the build process of physical structures. When creating web files, Emmet offers great shortcuts. As you follow these steps, work slowly so that you can appreciate how to properly interact with Emmet Abbreviations.

  1. Create an index.html file in a new folder. Add a basic html document using Emmet by typing html:5 and selecting the Emmet-generated expansion.

    Emmet

  2. When you press Tab, it will create the following HTML. The highlighted parts are the “tab stops” for editing the expanded snippet.

    index.html
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
    

    </body>
    </html>

  3. Press Tab two times to set the focus to the <title> tag, and type Home Page. Your <title> tag should now look like this.

    index.html
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>

    Press Tab once more to move to the last Emmet tab stop for this snippet, inside the <body> tag.

  4. Add some basic content to the page using Emmet:

    h1{Emmet for HTML/CSS}+ul>li{Item $}*3^p*3>lorem

    This should produce the following markup.

    index.html
    <body>
        <h1>Emmet for HTML/CSS</h1>
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
        </ul>
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Explicabo maiores facere eaque praesentium exercitationem obcaecati alias rerum architecto, omnis possimus dolorem amet sint laborum dolore minima fugiat quaerat placeat nostrum.</p>
        <p>Sit est excepturi assumenda ab non pariatur rem at eum facilis, eos ad dolore odio. Quasi minima harum debitis magni quas error blanditiis quo corrupti neque a est, atque sed.</p>
        <p>Reiciendis molestiae, esse iure voluptatum maxime rerum distinctio dolorem soluta ducimus molestias ex exercitationem doloribus aliquid? Qui aliquid sit minus natus debitis assumenda quae voluptate architecto, facere vero ducimus sint!</p>
    </body>

  5. Return to the <head> element of the page, and add a new line beneath the <title> tag. Then type link:css. As you are typing, you should see the Emmet suggestions appear.

    Typing 'link'

    Pressing Tab produces the following <link> tag.

    index.html
    <link rel="stylesheet" href="style.css">

  6. View the page in the browser by launching it using Live Server. Right-click on the file and choose “Open with Live Server”.

    Live Server

    If you don’t have Live Server installed, you can get it from the Extensions Marketplace.

You’ve created a single HTML page with some quick content using Emmet. There’s lots more to discover about Emmet for HTML, but let’s move on to exploring Emmet for CSS.

Add in Some CSS

In the last part of this tutorial, you created a <link> to a stylesheet file. Here, we’ll create that file and use Emmet to scaffold a quick design.

  1. Create a file named style.css.

  2. Create a style to apply to all elements.

    style.css
    * {
    

    }

    Inside the curly braces, type bxz for the box-sizing style. You should have the following.

    style.css
    * {
        box-sizing: border-box;
    }

  3. Add another style for the <h1> tag.

    style.css
    h1 {
    

    }

    Type c to trigger an Emmet snippet for color; use rebeccapurple. Then on the next line, type td:u for creating an underline.

    style.css
    h1 {
        color: rebeccapurple;
        text-decoration: underline;
    }

  4. Lastly, let’s make the first letter of the first paragraph stand out. Create a style for p:first-child:first-letter.

    style.css
    p:first-of-type:first-letter {
    

    }

    Again, we’ll use c for triggering the color; use #903 for the value. Then use ff to trigger the font-family styling and type “Georgia” to bring up that font and its fallbacks. Use pr for padding-right, with a value of 0.2em. Lastly, add the initial-letter: 2; style for drop-caps (there’s no Emmet for this one).

    style.css
    p:first-of-type:first-letter {
        color: #903;
        font-family: Georgia, 'Times New Roman', Times, serif;
        padding-right: 0.2em;
        initial-letter: 2;
    }

  5. The preview of the web page should look something like this.

    Simple Styles

Conclusion

Emmet can speed up your HTML/CSS development (provided you already know how those languages work). Once you’ve got your code created, launch it with a Web Server to see the results.

Emmet Cheat Sheet