HTML Font Styles Line Spacing

HTML Font Styles Line Spacing

As you begin to place more and more elements onto your Web page, you will want to format some of the elements to make them stand out, or give them a special appearance.

Several tags exist to further format text elements:

1 2 3 4 5

<p>This would be <b>Bold Text</b></p> <p>This would be <i>Italic Text</i></p> <p>This would be <sup>Superscripted Text</sup></p> <p>This would be <sub>Subscripted Text</sub></p> <p>This would be <del>Strikethrough Text</del></p>

These tags should be used sparingly. And what we mean by that is that you should only use them to bold or italicize one or two words in your elements at a time. If you wish to bold an entire paragraph, you will want to use the style attribute.

1 2 3

<p style="font-weight: bold;">This would be Bold Text</p> <p style="font-style: italic;">This would be Italic Text</p> <p style="text-decoration: line-through;">This would be Strikethrough Text</p>

If you notice, the <u></u> tag is not listed above. This tag is depreciated from HTML 4.01 Strict and should not be used. To underline your text you will use a little CSS:

1	<p>This text would be <span style="text-decoration: underline;">underlined</span></p>

Line Height

You can also control the spacing between the lines in your paragraphs and lists by using the style attribute with the line-height property. You can use percentages (120%) or pixels (18px).

1 2	<p style="line-height: 150%;">These lines would be 150% further apart.</p> <p style="line-height: 80%;">These lines would be 80% closer together.</p>