<!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>