Setting Font Size with Keywords Using CSS

CSSWeb DevelopmentFront End Technology

The CSS font-size property can be set with absolute and relative keywords. This scales the text as desired.

Syntax

The syntax of CSS font-size property is as follows −

Selector {
   font-size: /*value*/
}

The following table lists the standard keywords used in CSS −

Sr.NoValue & Description
1medium
Sets the font-size to a medium size. This is default
2xx-small
Sets the font-size to an xx-small size
3x-small
Sets the font-size to an extra small size
4small
Sets the font-size to a small size
5large
Sets the font-size to a large size
6x-large
Sets the font-size to an extra-large size
7xx-large
Sets the font-size to an xx-large size
8smaller
Sets the font-size to a smaller size than the parent element
9larger
Sets the font-size to a larger size than the parent element

The following examples illustrate how CSS font-size property can be set with keywords.

Example

 Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
h1{
   font-size: larger;
}
#demo {
   font-size: medium;
   text-align: center;
   background-color: floralwhite;
}
p {
   font-size: xx-large;
}
</style>
</head>
<body>
<h1>Demo Heading</h1>
<p id="demo">This is demo text.</p>
<p>This is another demo text.</p>
</body>
</html>

Output

This gives the following output −

Example

 Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
div {
   margin: auto;
   padding: 5px;
   width: 30%;
   border: 1px solid;
   border-radius: 29%;
   text-align: center;
   font-size: xx-small;
}
p {
   font-size: xx-large;
}
</style>
</head>
<body>
<div>
<div>One</div>
<p>Two</p>
</div>
</body>
</html>

Output

This gives the following output −

raja
Published on 09-Jan-2020 10:51:11
Advertisements