Ids and Classes(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 Tutorials</h3>

    <div id="mainbox" class="redbg blackborder">this is mainbox</div>

    <span class="redbg"></span>

    <!-- emmit -->

    <!-- . is for class and # is for id -->

    <span class="redbg"></span>

    <span id="mainSpan"></span>

    <div class="redbg blackborder anotherclass"></div>


    <!-- emmet takes div tag as default -->

    <div class="background"></div>


    <!-- span.myclass.myclass2.myclass3*4 <tab> to print 4 similar elements uaing emme -->

    <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">four</span>

</body>


</html>

Comments

Post a Comment

Popular posts from this blog

Transform Property In CSS

 <!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>CSS Transform</title>     <style>         * {             margin: 0px;             padding: 0px;         }         .container {             height: 80vh;             background-color: rgb(44, 19, 92);             display: flex;             justify-content: center;             align-items: center;         }         .box {             displ...
Read more

More on CSS Selectors

 <!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>More on selectors</title>     <style>         h1{             background-color: red;             color: black;             font-weight: bold;             text-align: center;         }         body{             background-color: rgb(97, 92, 97);         }         /* if p is contained by any li which is contained by div  */         /* div li p{             color: rgb(255, 25...
Read more