Web Development Tutorials


Text Properties

The previous font settings can be paired with other style sheet properties to apply additional formatting to strings of text. The following table lists these properties that can bring more variety to text displays. Some of the properties pertain to styling the font itself, while others pertain to the structural arrangement of text within its container.

Display Character Name Code Description
" " " Quote
& & & Ampersand
' ' Apostrophe
< &lt; &#60; Less than
> &gt; &#62; Greater than
&trade; &#153; Trademark
  &nbsp; &#160; Non-breaking space
¢ &cent; &#160; Cents
¦ &brvbar; &#166; Broken vertical bar
§ &sect; &#167; Section
© &copy; &#169; Copyright
« &laquo; &#171; Left angle quote
» &raquo; &#187; Right angle quote
¬ &not; &#172; Not sign
® &reg; &#174; Registered trademark
° &deg; &#176; Degree
± &plusmn; &#177; Plus/minus
&para; &#182; Paragraph
· &middot; &#183; Middle dot
&bull; &#149; Bullet
¼ &frac14; &#188; Fraction one-quarter
½ &frac12; &#189; Fraction one-half
¾ &frac34; &#190; Fraction three-quarters
÷ &divide; &#247; Division
× &times; &#215; Multiplication
ø &oslash; &#248; Small o-slash
Ø &Oslash; &#216; Large O-slash
&#150; En dash
&#151; Em dash

Figure 4-21. Special character names and codes.

As an example of using these special characters, the following code leaves five spaces between words by using non-breaking space (&nbsp;) and bullet (&bull;) characters between them.


Listing 4-22. Using special characters for Web page display.

THERE  •   ARE  •   FIVE  •   SPACES  •   BETWEEN  •   THESE  •   WORDS.

Figure 4-22. Browser display of hard spaces and bullets.

Displaying HTML

If you need to display HTML tags as part of the text on a Web page, you cannot type "<" and ">" symbols. These characters are interpreted by the browser as enclosing HTML tags and would be treated as such. Instead, you must use the special HTML characters "&lt;" and "&gt;" to display these symbols. Assume that you wish to display the following HTML code on a Web page.

<p>This is a paragraph in which the word <span class="red">RED</span>
is displayed in red by surrounding it with a <span> tag to which a 
style class is applied.</p>

Figure 4-23. Browser display of HTML code.

The above output needs to be entered in the text editor using special characters in place of < and > symbols.

<pre style="font-size:0.9em">
&lt;p&gt;This is a paragraph in which the word <span class="red">&lt;span class="red"&gt;</span>
RED&lt;/span&gt; is displayed in red by surrounding it with a &lt;span&gt;
tag to which a style class is applied.&lt;/p&gt;

Listing 4-23. Code to display HTML tags in the browser.

Styling Character Codes

You should note that the special character codes can have styles applied to them just as other alphanumeric characters. For example, the following equation is displayed in 1.8em bold Courier New font.

      .equation {font-family:courier new; font-size:1.8em; font-weight:bold}

    <p class="equation">&frac14; + &frac12; = &frac34;</p>

Listing 4-24. Applying styles to character codes.

¼ + ½ = ¾

Figure 4-24. Character codes with styles applied.

TOP | NEXT: Chapter 5 - Graphic Images