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