CSS: Text, Fonts, and Tables - Adjusting Your Font Size (Page 3 of 6 )
There are two ways to adjust your font size in CSS and we are about to take a peek at both. I know, it's exciting, but try to contain yourself.
Changing Font Size Using Percentage
<html>
<head>
<style type="text/css">
h1 {font-size: 100%}
h2 {font-size: 120%}
h3 {font-size: 130%}
h4 {font-size: 140%}
h5 {font-size: 150%}
h6 {font-size: 160%}
p {font-size: 170%}
b {font-size: 30%}
</style>
</head>
<body>
<h1>How come trees aren't fat?</h1>
<h2>I mean all they do is sit there and eat and drink all day.</h2>
<h3>They never exercise or anything</h3>
<h4>Lazy bastards.</h4>
<h5>I mean they rely on the wind to move their leaves.<h5>
<h6>I'm fat.</h6>
<p>You know what? This paragraph is fat too.</p>
<span><b>Disco. That is all.</b></span>
</body>
</html>
Changing Font Size with Numbers
<html>
<head>
<style type="text/css">
h1 {font-size: 10}
h2 {font-size: 20}
h3 {font-size: 30}
h4 {font-size: 40}
h5 {font-size: 50}
h6 {font-size: 60}
p {font-size: 70}
b {font-size: 130}
</style>
</head>
<body>
<h1>How come trees aren't fat?</h1>
<h2>I mean all they do is sit there and eat and drink all day.</h2>
<h3>They never exercise or anything</h3>
<h4>Lazy bastards.</h4>
<h5>I mean they rely on the wind to move their leaves.<h5>
<h6>I'm fat.</h6>
<p>You know what? This paragraph is fat too.</p>
<span><b>Disco. That is all.</b></span>
</body>
</html>
Setting the Size of Fonts with Your Pants Size
<html>
<head>
<style type="text/css">
h1 {font-size: xx-small}
h2 {font-size: x-small}
h3 {font-size: small}
h4 {font-size: medium}
h5 {font-size: large}
h6 {font-size: x-large}
p {font-size: xx-large}
b {font-size: smaller}
p.fool {font-size: larger}
</style>
</head>
<body>
<h1>How come trees aren't fat?</h1>
<h2>I mean all they do is sit there and eat and drink all day.</h2>
<h3>They never exercise or anything</h3>
<h4>Lazy bastards.</h4>
<h5>I mean they rely on the wind to move their leaves.<h5>
<h6>I'm fat.</h6>
<p>You know what? This paragraph is fat too.</p>
<span><b>Disco. That is all.</b></span>
<p name="fool"><i>Grease is the word is the word is the word</i></p>
</body>
</html>
Next: Fonting with Style >>
More Style Sheets Articles
More By James Payne
