/

HTML / CSS / JavaScript Tutorial

CSS Property: font-size

[this page | pdf | back links]

The CSS (CSS1) font-size property indicates the size of the font to be used for an element.

 

Valid property values (other than inherit and initial) are:

 

Value

Description

length

Fixed size as a CSS length (px, cm, …)

%

Set as a percentage of parent element’s font size

large

Large size

larger

Larger size than parent element’s font size

medium

(default value). Medium size

small

Small size

smaller

Smaller size than parent element’s font size

x-large

X-large size

xx-large

XX-large size

x-small

X-small size

xx-small

XX-small size

 

Default Value:

medium

JavaScript syntax:

e.g. object.style.fontSize="12px"

Inherited:

Yes

Animatable:

Yes

 

EXAMPLE:


HTML USED IN THIS EXAMPLE:
<!DOCTYPE html>
<html> <!-- Copyright (c) Nematrian Limited 2018 -->
<head>
<style>
div {width: 100px; border: 1px dotted black;}
.x1 {font-size: x-large;}
</style>
</head>
<body>
Element with default property<br>
<div>abcdefgh</div><br>
Property set using in-file HTML style<br>
<div class="x1">abcdefgh</div><br>
Property set using JavaScript<br>
<div id="x2">abcdefgh</div>

<script>
document.getElementById("x2").style.fontSize = "x-large";
</script>

</body>
</html>

FUNCTION THAT MAY ASSIST IN TESTING WHETHER FEATURE IS SUPPORTED:
function isSupportedCSSPropertyFontSize() {
  var x = document.createElement("DIV"); x.style.fontSize = "x-large"; return (window.getComputedStyle(x, null).fontSize == "x-large");
}


NAVIGATION LINKS
Contents | Prev | Next | CSS Properties


Desktop view | Switch to Mobile