DEV Community

Cover image for Cheatsheet of emmets
Amrut
Amrut

Posted on • Edited on

Cheatsheet of emmets

#css #webdev #beginners #codenewbie

Boilerplate 

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document /title> /head> <body> </body> </html>
Enter fullscreen mode Exit fullscreen mode

basic elements

1) section 

<section> </section>
Enter fullscreen mode Exit fullscreen mode

2) .example 

<div class="example"> </div>
Enter fullscreen mode Exit fullscreen mode

3) section#intro 

<section id="intro"> </section>
Enter fullscreen mode Exit fullscreen mode

4) p>lorem10 

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque, facere? </p>
Enter fullscreen mode Exit fullscreen mode

5) section#intro>.container 

<section id="intro"> <div class="container"> </div> </section>
Enter fullscreen mode Exit fullscreen mode

6) p{your custom text} 

<p>your custom text </p>
Enter fullscreen mode Exit fullscreen mode

7) link:css 

<link rel="stylesheet" href="style.css">
Enter fullscreen mode Exit fullscreen mode

8) script:src 

<script src=""> </script>
Enter fullscreen mode Exit fullscreen mode

9) h3+p+p 

<h3> </h3> <p> </p> <p> </p>
Enter fullscreen mode Exit fullscreen mode

10) ul>li*3^p*3 

<ul> <li> </li> <li> </li> <li> </li> </ul> <p> </p> <p> </p> <p> </p>
Enter fullscreen mode Exit fullscreen mode

11) ul>li*4 

<ul> <li> </li> <li> </li> <li> </li> <li> </li> </ul>
Enter fullscreen mode Exit fullscreen mode

12) h3+(ul>li*3)+h3 

<h3> </h3> <ul> <li> </li> <li> </li> <li> </li> </ul> <h3> </h3>
Enter fullscreen mode Exit fullscreen mode

13) li.list-item-$*3 

<li class="list-item-1"> </li> <li class="list-item-2"> </li> <li class="list-item-3"> </li>
Enter fullscreen mode Exit fullscreen mode

Top comments (3)

Collapse
 
pandademic profile image
Pandademic •

nice!

Collapse
 
houdinii profile image
Brian B. •

The above works in JetBrains products (ie. WebStorm) out of the box as well. (jetbrains.com/help/idea/settings-e...)

Collapse
 
computergeek profile image
Amrut •

Actually I havent tried jetbrains, it worked fine in vs code,btw thanks for correcting.