<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="index.css">
    <title>CSS Common Styling</title>
    <style>
        /* External CSS */
    </style>
</head>
<body>
    <h1>CSS Common Styling</h1>
    <h2>Display</h2>

    <h3>Display: Inline vs Block</h3>
    <div id="div-3">A dive can be displaed as inline</div>
    <div id="div-4">A dive can be displaed as inline</div>
    <span id="span-3">A span can be displaed as block</span>
    <span id="span-4">A span can be displaed as block</span>

    <h3>Display: Inline-Block</h3>
    <span id="span-5">Span-Inline-Block-1</span>
    <span id="span-6">Span-Inline-Block-2</span>
    <div id="div-5">Div-Inline-Block-1</div>
    <div id="div-6">Div-Inline-Block-2</div>

    <h4>Display: None</h4>
    <div id="div-7">Divs are block by default.</div>
    <div id="div-8">Divs are block by default. Adding display:none; property in css ruleset hides an element</div>
    <span id="span-7">This is the fifth span.</span>

    <!-- CSS Units -->
    <h3>CSS Unis</h3>

    <h4>px vs %</h4>
    <div class="box fifty-percent">50%</div>
    <div class="box one-hundred-pixels">100px</div>
    <div class="box fifty-vw">50vw</div>
    <div class="box twenty-five-vh">25vh</div>
    <div>16px</div>
    <div class="one-rem">1rem</div>
    <div class="one-em">1em</div>
    <div class="two-em">2rem</div>
    <div class="two-em">2em</div>
    <div class="two-hundred-percent">200%</div>

 <!-- CSS Background Properties  -->
<section class="background">
    <div class="container-bg">
        <h3 class="bg-title">CSS Background Properties</h3> 
    </div>
</section>





</body>
</html>