Styling Text
There are three ways in which the style of text can be adjusted in a web page: formatting elements, formatting attributes, and CSS. Since using (X)HTML for presentation is non-semantic coding, most formatting elements are deprecated, as are, to a lesser extent, many formatting attributes. This page will note the more common deprecated methods of formatting text but will concentrate on CSS methods. Examples will show the CSS using inline styling, but the same styling properties may be used in stylesheets.
There are many ways to format text, and the categories below do not exhause all the possibilities, especially for CSS.
Text Weight
Technically, text weight refers to the thickness of the characters. For the purposes of this discussion, text weight will be defined as a method of making text more or less prominent with indicating the meaning of that prominence. There are two (X)HTML elements used for this purpose: <strong> and <b>.
<strong>This is text inside <strong> tags.</strong>
<strong>This is text inside <b> tags.</strong>
By default, most browsers display these elements in bold. Thus the above code will display as
This is text inside <strong> tags.
This is text inside <b> tags.
The only difference is that : <strong> is slightly more semantic than <b>; thus it is preferable for those who are aiming to make their coding as semantic as possible.
A preferable choice is to use the CSS font-weight property:
<p style="font-weight:bold;">Some text in bold.</p>
Other values that might be given for the font-weight property are normal, bolder, or lighter. Numerical values from 100-900 may also be given, with 400 equivalent to normal and 700 equivalent to bold.
Emphasis
In typography, some types of text are indicated by means of italics. Examples include not only text intended to be read as emphasised, but also titles of books and foreign words. This type of usage is not semantic because italics does not have a single meaning. It is nevertheless possible to display text in italics on a web page by various means. In (X)HTML, there are two elements used for this purpose: <em> and <i>. As with the <strong> and <b> elements, <em> is sometimes preferred to <i> because it is perceived as being slightly more semantic.
In CSS, italics can be displayed by using the value italic for the font-style property:
<p style="font-style:italic;">Some text in italics.</p>
Other possible values are normal, oblique, and inherit. These will not be discussed here, but there uses are easy to look up or discover by experimentation.
Fonts
In older forms of HTML font styles, colours, and sizes could all be set by using the <font> element with various attributes. Here is an example:
<font face="serif" size="6" color="green">This is some text!</font>
This will display
This is some text!
The <font> element is now deprecated and fonts should always be set using CSS.
The CSS properties for font style, colour, and size are as follows: font-family, font-size, color. Hence the text above will be generated by the following code:
<p style="font-family:serif;font-size:24pt;color:green;">This is some text!</p>
A few further words need to be said about each of these properties. The web has inherited from print technology two basic types of fonts: serif (e.g. Times New Roman) and sans serif (e.g. Arial, Helvetica, and Courier). When applying a font, it is possible to designate first, second, and third choices:
<p style="font-family:Arial, Helvetica, sans-serif;">This is some text!</p>
This will render the text in the paragraph element in Arial. If Arial is not available, Helvetica will be used, and, if Helvetica is not available, the text will appear in the browser's default sans-serif font.
The font-size property accepts a variety of types of values: percentages (e.g. 200% for double normal size), point sizes (e.g. "12pt" for a 12 point font), pixel heights (e.g. 10px for 10 pixels), or ems—the length of the letter m (e.g. 1em, 2em).
The color property accepts basic English colour names like black, white, red, and blue. However, it will also accept a greater variety of colours designated by hexidecimal or RGB codes. There are a variety of resources on the the internet for getting these codes. For a basic tutorial, see the W3Cschools CSS Color page.
Indentation
Recall that in (X)HTML two consecutive spaces are processed as one. Therefore, it is not possible to indent text using spaces (or the tab key). Originally, the most common technique was to use the <blockquote> element since most browsers add a margin all around the element. Here is an example.
This text is inside <blockquote> tags.
You could move text further to the right by nesting blockquotes inside of blockquotes. However, this is not only unwieldy, but also unsemantic, since a blockquotes is technically supposed to be used for an extended quotation. A more effective method is to exploint the CSS block model. Since all elements have margins, all you have to do to indent text is increase the size of the margin. Here is an example:
<p style="margin-left:50px;">This is some indented text!</p>
The code above produces the following result:
This is some indented text!
The margin can be set precisely (using pixels, points, or ems), which makes it much preferable to <blockquote>. Other margins can also be set; for further information, see the discussion of the CSS box model.
Note that this effect does not reproduce the first-line only indentation that we normally associate with the beginning of a printed paragraph. For this, there is another CSS property: text-indent. It accepts the same values and measurements as margin.
Alignment
Whilst indentation simply moves the text in a particular direction by a fixed measure, alignment moves the text in a direction relative to the boundaries of the browser window. Text aligned to the left will appear on the left side of the window; text aligned to the right will appear on the right side of the window. Text aligned to the centre will appear in the centre.
Historically, the align attribute was used for this purpose:
<p align="center">Some Centred Text</p>
<p align="left">Some Left-Aligned Text</p>
<p align="right">Some Right-Aligned Text</p>
The above code will be displayed as follows:
Some Centred Text
Some Left-Aligned Text
Some Right-Aligned Text
This method of aligning text is still frequently used, although it is technically deprecated due to the W3C's recommendation that separate presentation from our (X)HTML markup. The same effect can be achieved using the CSS text-align property:
<p style="text-align:center;">Some Centred Text</p>
<p style="text-align:left;">Some Left-Aligned Text</p>
<p style="text-align:right;">Some Right-Aligned Text</p>
The reason why (X)HTML's @align continues to be used is probably that it is less cumbersometo type for inline styling. But, wherever possible, one should attempt to style text using stylesheets, where this is not as great a problem.