Set font-size and line-height in HTML and CSS

Description

The following code shows how to set font-size and line-height.

Example


<!--from  ww  w  . j  a  v a2 s .  co m-->




<html>
<head>
<title>Examples of font-size and line-height</title>
<style type="text/css">
body {
font-size: 12px;
}
h1 {
font-size: 1em;
line-height: 1.5;
font-weight: bold;
margin: 1em 0 0 0;
}
p {
margin: 0;
width: 33em;
}
p.one {
font-size: 1em;
line-height: 1.5em;
}
p.two {
font-size: 1.2em;
line-height: 1.5em;
}
</style>
</head>
<body>
<h1>Size: 1em, line-height: 1.5em</h1>
<p class="one">
this is a test. this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test. </p>
<h1>Size: 1.2em, line-height: 1.5em</h1>
<p class="two">
this is a test. this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test. </p>

</body>
</html>

Click to view the demo

The code above generates the following result.

Set font-size and line-height in HTML and CSS

Home »
  HTML CSS Tutorial »
    Text »
      CSS Text Style

...
Set font size and color for 'first-letter' ...
Set font size and color for 'first-line' in...
Set negative text indent for list item in H...
Set paragraph to text-indent 3em in HTML an...
Set text-indent to 10% in HTML and CSS
Set text-indent to -25px in HTML and CSS
Set text-indent to 25% in HTML and CSS
Set text-indent to -5% in HTML and CSS
Use margin to indent paragraph in HTML and ...
Set letter-spacing to 10px; in HTML and CSS
Set letter-spacing to 2px in HTML and CSS
Set letter-spacing to negative value in HTM...
Set letter-spacing to normal in HTML and CS...
Compare line-height:normal, 18px, 1.5em, 1....
Compare line height settings in HTML and CS...

Set font-size and line-height in HTML and C...