Can someone explain how CSS font sizes work? I set a specific line to be 200% font size, but changing the body font size affected it. Shouldn't the line maintain its specified size? When the body font size is changed from 12pt to 8pt, the line "There is not much on it" becomes smaller. What is the new font size of the line if the body font size is now 8pt? Is it calculated as 200% * 8/12 = 133%? I'm new to this and confused.
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="mystyle.css">
<style>
p.bigger{font-size:200%}
p.smaller{font-size:10pt}
#intro{color:red}
body{font-size:12pt}
p{color:blue; font:Arial, sans-serif}
h1{color:green}
</style>
</head>
<body>
<h1>Introduction</h1>
<p id="intro">Welcome to my page</p>
<p class="bigger">There is not much on it</p>
<p class="smaller">Except this</p>
<ul>
<li>Short list</li>
</ul>
<h1 style="font-style:italic">Contact</h1>
Here is my address
</body>
<html>