tut7.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ids and Classes in HTML</title>
</head>

<body>
    <h3> Ids and classes tutorial</h3>
    <div id="mainbox" class="redBg blackborder"> <!-- id means identify by this name-->
        this is mainbox
    </div>
    <span class="redBg"></span>
    <!-- Select and press ctrl + / to commit -->
    <!-- Emmet is shortcut for wwriting fast-->
    <!-- . is for class and # is for id -->
    <span class="redBg"></span>
    <span id="mainSpan"></span>
    <!-- div.redBg.blackborder.anotherclass and enter-->
    <div class="redBg blackborder anotherclass"></div>anotherclass
    <!-- Emmet takes div tag as default -->
    <!-- .blackbackground and enter -->
    <div class="blackbackground"></div>

    <!-- creating multiple elements usinf emmet -->
    <!-- span.myClass.myClass2.myClass3*4 + tab or enter to print 4 similar element using emmet-->

    <span class="myClass myClass2 myClass3">first</span>
    <span class="myClass myClass2 myClass3">second</span>
    <span class="myClass myClass2 myClass3">third</span>
    <span class="myClass myClass2 myClass3">fourth</span>

</body>

</html>