Tools of the Trade

Lesson 6: Formatting Text Using HTML

There are multiple methods of formatting text in HTML.

Different Methods of Formatting Text

The two examples below produce the same result but uses different methods.

Using the Font Tag

The font tag is not supported in HTML5 so I would recommend against it.

<p><font face="Arial" color="red" size="4">Hello World</font></p>

Using the Style Tag

This is the preferred method, at this point since I have not covered CSS (Cascading Style Sheets). As a sidebar, this method is also called Inline CSS.

<p style="font-family: Arial; color:red; font-size:14px;">Hello World</p>

The code inside the style="" HTML attribute are CSS attributes.

CSS Properties to Modify Text

Below is a list of CSS properties along with sample values used to modify the text.


color: red;
text-align: left;
text-decoration: underline;
text-indent: 0;
text-shadow: none;
text-transform: uppercase;
letter-spacing: normal;
line-height: 1;

CSS Properties to Modify Font

Below is a list of CSS properties along with sample values used for modifying the font, which is applied to your text.


font-family: Arial, san-serif;
font-size: 14px;
font-weight: normal;
font-style: italic;
font-variant: normal;

Resources

W3 Schools List of CSS Text Attributes (scroll down)
http://www.w3schools.com/css/css_text.asp

W3 Schools List of CSS Font Attributes (scroll down)
http://www.w3schools.com/css/css_font.asp