CSS Font Size
The font-size property sets the size of a font. One way to set the size of fonts on the web is to use keywords. For example xx-small, small, medium, large, larger, etc.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<p class="small"> Welcome to PHPGurukul Programing Blog </p> <p class="medium"> Welcome to PHPGurukul Programing Blog </p> <p class="large"> Welcome to PHPGurukul Programing Blog </p> <p class="xlarge"> Welcome to PHPGurukul Programing Blog </p> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 |
p.small { font-size: small; } p.medium { font-size: medium; } p.large { font-size: large; } p.xlarge { font-size: x-large; } |
Output
The font-size Property
You can also use numerical values in pixels or ems to manipulate font size.
Setting the font size in pixel values (px) is a good choice when you need pixel accuracy, and it gives you full control over the text size.
The em size unit is another way to set the font size (em is a relative size unit). It allows all major browsers to resize the text. If you haven’t set the font size anywhere on the page, then it is the browser’s default size, which is 16px.
To calculate the em size, just use the following formula: em = pixels / 16
Example
|
1 2 3 |
h1 { font-size: 20px; } |
|
1 2 3 |
h1 { font-size: 1.25em; } |
Both of the examples will produce the same result in the browser because 20/16=1.25em.
