Easy Tutorial
❮ Prop Number Required Met Loc Reload ❯

Style fontSize Property


Definition and Usage

The fontSize property sets or returns the font size of the text.

Syntax

Set fontSize property:

Return fontSize property:

Value Description
xx-small <br>x-small <br>small <br>medium <br>large <br>x-large <br>xx-large Sets the font size to different fixed sizes, from xx-small to xx-large.
smaller Reduces the font size by one relative unit.
larger Increases the font size by one relative unit.
length Defines the font size using units like px, cm, etc.
% Defines the font size as a percentage of the parent element's font size.
inherit The value of the fontSize property is inherited from the parent element.

Browser Support

All major browsers support the fontSize property.

Note: IE7 and earlier versions do not support the "inherit" value. IE8 requires !DOCTYPE to support "inherit". IE9 supports "inherit".


Example

Change the font size of the text:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>tutorialpro.org(tutorialpro.org)</title> 
<script>
function displayResult(){
    document.getElementById("p1").style.fontSize="xx-large";
}
</script>
</head>
<body>

<p id="p1">This is some text.</p>
<br>
<button type="button" onclick="displayResult()">Modify Font Size</button>

</body>
</html>

❮ Prop Number Required Met Loc Reload ❯