You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
77 lines
1.9 KiB
HTML
77 lines
1.9 KiB
HTML
12 months ago
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
|
|
<title>CSS Common Styling Properties</title>
|
||
|
|
<link rel="stylesheet" type="text/css" href="./index.css">
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<h1>CSS Common styling</h1>
|
||
|
|
<h2>Display</h2>
|
||
|
|
<h4>Display: Inline vs. Block</h4>
|
||
|
|
<!-- you can change the default display prpoerties of elements throgh the display propert in CSS.-->
|
||
|
|
<div id="div-3">A div can be displayed as inline. </div>
|
||
|
|
<div id="div-4">A div can be displayed as inline. </div>
|
||
|
|
<span id="span-3">A div can be displayed as block. </span>
|
||
|
|
<span id="span-4">A div can be displayed 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>Dislplay:None</h4>
|
||
|
|
<div id="div-7">Div-Inline-Block-1</div>
|
||
|
|
<div id="div-8">Div-Inline-Block-2</div>
|
||
|
|
|
||
|
|
<h3>CSS Units</h3>
|
||
|
|
<h4>pc vc. %</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>16</div>
|
||
|
|
<div class="one-rem">1rem</div>
|
||
|
|
<div class="one-em">1em</div>
|
||
|
|
<div class="two-rem">2rem</div>
|
||
|
|
<div class="two-em">2rem</div>
|
||
|
|
<div class="two-hundred-percent">200%</div>
|
||
|
|
|
||
|
|
<div class="parent">
|
||
|
|
<div class="one-rem">1rem</div>
|
||
|
|
<div class="one-em">1em</div>
|
||
|
|
<div class="two-rem">2rem</div>
|
||
|
|
<div class="two-em">2rem</div>
|
||
|
|
<div class="two-hundred-percent">200%</div>
|
||
|
|
|
||
|
|
<div class="box fifty-percent">50%</div>
|
||
|
|
<div class="box one-hundred-pixels">100%</div>
|
||
|
|
|
||
|
|
<div class="box fifty-vw">50vw</div>
|
||
|
|
<div class="box twenty-five-vh">25vh</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<section class="background">
|
||
|
|
<div class="container-bg">
|
||
|
|
<h3 class="bg-title">CSS Background properties </h3>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|