Class one html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style>
        .newaz {
            color: red
        }
        .puja {
            background-color: black
        }
        .zahid {
            color: green
        }
        .mairan {
            background-color: green
        }
        #newaz {
            color: red
        }
        #zahid {
            color: green
        }
        #puja {
            background-color: black
        }
        #mairan {
            background-color: green
        }
        .image {
            height: 250px;
            width: 250px;
        }

    </style>
</head>
<body>
    <!--header tag (h1 - h6)-->
    <!-- <h1>I am from header 1</h1>
    <h2>I am from header 2</h2>
    <h3>I am from header 3</h3>
    <h4>I am from header 4</h4>
    <h5>I am from header 5</h5>
    <h6>I am from header 6</h6>

    <!--paragraph tag p-->
    <!-- <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis temporibus voluptates expedita dolore tenetur distinctio, adipisci nesciunt doloribus aut porro minima aliquam numquam, ipsam id debitis sit. Fugiat, corrupti rem?</p> -->

    <!--bold tag b-->
    <!-- <p><b>Lorem ipsum dolor sit amet consectetur, adipisicing elit. <b>Vero</b> ad blanditiis maiores minus eveniet natus,
    excepturi iure unde distinctio eligendi eos consequuntur doloremque atque praesentium nemo expedita voluptate temporibus
    laboriosam!</b></p> -->

    <!-- <b>Hello</b> --> -->

    <!--strong tag -->
    <!-- <p><strong>Lorem</strong> ipsum dolor sit amet consectetur adipisicing elit. Id excepturi architecto fugit minima rerum similique est optio possimus libero animi inventore iure quae adipisci error perferendis, ratione et modi repellat!</p> -->

    <!-- <p>5 <sub>4</sub></p>
    <p><del>previous price 200 tk</del></p>
    <p>current price 500 tk</p> -->
    <!-- <h1><mark>Hello</mark></h1 -->
    <!-- <img src="./img/1.jpg" alt="image one"> -->
    <!-- <a href="https://www.facebook.com/sshopnil1/" target = "_blank">hello</a>  -->
    <!-- css -->
    <!-- 1. inline css
    2. external css
    3. internal css -->

    <!-- inline css -->
    <!-- <h1 style="color: white; background-color: black; text-align: left; font-size: 195%;">Lorem, ipsum dolor</h1> -->

    <!-- internal css-->
    <!-- class and id-->
    <!-- (.) = class (#) = id-->
    <h1 id = "newaz" class = "mairan"  >Lorem, ipsum dolor</h1>
    <h1 id = "zahid" class = "puja">I am header one</h1>
    <img src="./img/1.jpg" alt="image one" class = "image">

</body>
</html>