1_selector.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>test CSS</title>
    <link
        rel="stylesheet"
        type="text/css"
        href="1_selector.css"
    >
</head>
<body>
    <!-- tag class id selector -->
    <p>Andi</p>
    <p class="student">Budi</p>
    <p class="student" 
    id="caca">
        Caca
    </p>

    <hr>

    <!-- atribute selector -->
    <p><a href="abc.com">
        Go to abc.com
    </a></p>
    <p><a href="xyz.id">
        Go to xyz.id
    </a></p>

    <hr>
    <!-- grouping -->
    <b>Ini bold</b><br>
    <i>Ini italic</i><br>
    <ins>Ini underline</ins><br>

    <hr>
    <!-- descendant selector -->
    <h3>
        Ini heading 3 di luar header
    </h3>
    <header>
        <h3>Ini heading 3 di dalam header</h3>
        <p>Ini paragraf dalam header</p>
    </header>

    <!-- child selector -->
    <hr>
    <article>
        <p>Ini p di article</p>
        <main>
            <p>Ini p di main</p>
        </main>
    </article>

    <!-- adjacent selector -->
    <hr>
    <h6>Ini heading 6</h6>
    <small>Andi</small>
    <small>Budi</small>
    <small>Caca</small>
    <small>Deni</small>

    <br><br><br><br><br><br><br>

</body>
</html>