Create a Webpage named relative.html
<!doctype html>
<head>
<title>Set the relative values of font-Size</title>
<style>
body{
font-size:large;
}
</style>
</head>
<body>
<h1>Working with font-size property using Relative values </h1>
<p> Base font Value</p>
<p style="font-size:larger">This font is larger than the base font</p>
<p style="font-size:smaller">This font is smaller than the base font.</p>
</body>
</html>
The Font size of the parent element body is set x-large. the paragraph elements are the child elements of the body element. The first paragraph is not assigned with any value. therefore it takes the size of the parent element which is x-large. In the Second paragraph the value of the font size is larger, therefore its font size is one unit larger than the parent element which is xx-large. In the last paragraph the value of the font size of the paragraph element is smaller. therefore its font size is one unit smaller than the parent element which is large.
The browser view of the relative.html file
<!doctype html>
<head>
<title>Set the relative values of font-Size</title>
<style>
body{
font-size:large;
}
</style>
</head>
<body>
<h1>Working with font-size property using Relative values </h1>
<p> Base font Value</p>
<p style="font-size:larger">This font is larger than the base font</p>
<p style="font-size:smaller">This font is smaller than the base font.</p>
</body>
</html>
The Font size of the parent element body is set x-large. the paragraph elements are the child elements of the body element. The first paragraph is not assigned with any value. therefore it takes the size of the parent element which is x-large. In the Second paragraph the value of the font size is larger, therefore its font size is one unit larger than the parent element which is xx-large. In the last paragraph the value of the font size of the paragraph element is smaller. therefore its font size is one unit smaller than the parent element which is large.
The browser view of the relative.html file
Nice bhai...
ReplyDelete