CSS-Font-Size-and-Style
CSS Font Size
- CSS font-size property is used to change the size of the font.
These are the possible values that can be used to set the font size:
Example:
<html>
<head>
<title>Practice CSS font-size property</title>
</head>
<body>
<p style="font-size:xx-small;"> This font size is extremely small.</p>
<p style="font-size:x-small;"> This font size is extra small</p>
<p style="font-size:small;"> This font size is small</p>
<p style="font-size:medium;"> This font size is medium. </p>
<p style="font-size:large;"> This font size is large. </p>
<p style="font-size:x-large;"> This font size is extra large. </p>
<p style="font-size:xx-large;"> This font size is extremely large. </p>
<p style="font-size:smaller;"> This font size is smaller. </p>
<p style="font-size:larger;"> This font size is larger. </p>
<p style="font-size:200%;"> This font size is set on 200%. </p>
<p style="font-size:20px;"> This font size is 20 pixels. </p>
</body>
</html>
Output:
CSS Font Style
- CSS Font style property defines what type of font you want to display. It may be italic, oblique, or normal.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-size: 100%;
}
h2 {
font-style: italic;
}
h3 {
font-style: oblique;
}
h4 {
font-style: normal;
}
}
</style>
</head>
<body>
<h2>This heading is shown in italic font.</h2>
<h3>This heading is shown in oblique font.</h3>
<h4>This heading is shown in normal font.</h4>
</body>
</html>
Output:
This heading is shown in italic font.
This heading is shown in oblique font.
This heading is shown in normal font.