font-size
Description
This property sets the size of the font. The size can be defined as an absolute size, a relative size, a length value, or a percentage value.
| Item | Value |
|---|---|
| Initial value | medium |
| Inherited | Yes. |
| Version | CSS1 |
| JavaScript syntax | object.style.fontSize="medium" |
| Applies to | All elements. |
Syntax and Property Values
font-size: length | /* ww w . j ava 2s . co m*/
percentage |
larger |
smaller |
xx-small |
x-small |
small |
medium |
large |
x-large |
xx-larger |
inherit
The property values are listed in the following table.
| Value | Description |
|---|---|
| xx-small | xx-small size |
| x-small | extra small size |
| small | small size |
| medium | medium size. This is default |
| large | large size |
| x-large | extra large size |
| xx-large | xx-large size |
| smaller | A smaller size than the parent element |
| larger | A larger size than the parent element |
| length | A fixed size in px, cm, etc. |
| % | A percent of the parent element's font size |
| inherit | Inherit font size from the parent element |
Example
The following code shows using different values to set
font-size.
h2 {font-size: 200%;}
code {font-size: 0.9em;}
p.caption {font-size: 9px;}
<!DOCTYPE HTML>
<html>
<html>
<head>
<style>
h2 {<!--from w ww .ja v a2 s.c o m-->
font-family: Georgia, Times, serif;
font-size: 18px;
}
</style>
</head>
<body>
<h1>this is a test. </h1>
<h2>this is a test. </h2>
<p>this is a test. <strong>this is a test. </strong>
this is a test. </p>
<p>this is a test. </p>
</body>
</html>
The code above generates the following result.
