ids and classes in html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <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 blueBorder">
        this is mainbox
    </div>
    <span class="redBg"></span>
    <!-- two elements cant have same id. an element cant have more than one id. two elements can have same class. an element can have more than one class.  -->
    <!-- EMMET -->
    <span class="redBg"></span>
    <span id="mainSpan"></span>
    <!-- for class we use . ie we can write span.xyz for class and similarly # is for id ie span#id  ,this is emmet, it is kinda shortcut-->

    <!--  emmet takes div as default ie if write .class then div will come  -->

    <div class="redBg"></div>

    <!-- Creating multiple elements using emmet  -->
    <!-- span.myclass.myclass2.myclass3*4 + <tab>  to print 4 similar elements 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>

Comments

Popular posts from this blog

css tutorial

css selectors

developer tools