selector.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>Document</title>
    <!-- external css -->
    <link rel="stylesheet" href="style.css">

    <!-- internal css -->
    <style>
        /* element selector */
        
        p {
            background-color: red;
        }
        /* id selector */
        
        #mypara {
            background-color: yellow;
        }
        /* class selector */
        
        .red {
            color: blue;
        }
    </style>
</head>

<body>
    <!-- <p>hi my name is Aatiq Afzal</p>
    <p id="mypara">Hi i'm Aatiq's friend</p>
    <p class="red"> this is my red para</p>
    <div class="red">this is my class red para</div> -->


    <div class="nav">
        <ul class="items">
            <li class="item"><a href="/this">Home</a></li>
            <li class="item"><a href="/this">About</a></li>
            <li class="item"><a href="/this">Services</a></li>
            <li class="item"><a href="/this">Reach Us</a></li>
            <li class="item"><a href="/this">Contact Us</a></li>
        </ul>
    </div>


    <!-- inline CSS -->
    <div style="color: purple;" class="bar">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eaque iure culpa non sint cumque quam reiciendis deleniti quasi aut inventore ducimus pariatur fuga similique nesciunt facilis recusandae, voluptatibus nisi maiores! Rem incidunt eum reprehenderit
        fuga at obcaecati facilis eius et in, ipsam illo optio facere adipisci rerum veniam assumenda impedit, ipsa, culpa exercitationem accusamus eos qui ducimus. Eum quaerat sunt accusamus repellendus atque possimus nesciunt error, molestias vitae
        mollitia. Nisi, delectus. Ipsum cupiditate, velit consequuntur incidunt repellendus in non minus earum. Sit voluptatibus reiciendis quidem labore sint officiis adipisci! Tempore quisquam voluptate dolore ea ipsum quidem recusandae nemo exercitationem
        animi.
        <a>item child</a></div>

    <div class="container">
        <div class="first"></div>
        <div class="second"></div>
    </div>


</body>

</html>