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
|
|
<
|
<
|
<
|
Less than
|
|
>
|
>
|
>
|
Greater than
|
|
™
|
™
|
™
|
Trademark
|
|
|
|
 
|
Non-breaking space
|
|
¢
|
¢
|
 
|
Cents
|
|
¦
|
¦
|
¦
|
Broken vertical bar
|
|
§
|
§
|
§
|
Section
|
|
©
|
©
|
©
|
Copyright
|
|
«
|
«
|
«
|
Left angle quote
|
|
»
|
»
|
»
|
Right angle quote
|
|
¬
|
¬
|
¬
|
Not sign
|
|
®
|
®
|
®
|
Registered trademark
|
|
°
|
°
|
°
|
Degree
|
|
±
|
±
|
±
|
Plus/minus
|
|
¶
|
¶
|
¶
|
Paragraph
|
|
·
|
·
|
·
|
Middle dot
|
|
•
|
•
|
•
|
Bullet
|
|
¼
|
¼
|
¼
|
Fraction one-quarter
|
|
½
|
½
|
½
|
Fraction one-half
|
|
¾
|
¾
|
¾
|
Fraction three-quarters
|
|
÷
|
÷
|
÷
|
Division
|
|
×
|
×
|
×
|
Multiplication
|
|
ø
|
ø
|
ø
|
Small o-slash
|
|
Ø
|
Ø
|
Ø
|
Large O-slash
|
|
–
|
|
–
|
En dash
|
|
—
|
|
—
|
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 ( ) and bullet (•)
characters between them.
THERE • ARE •
FIVE • SPACES •
BETWEEN • THESE •
WORDS.
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 "<" and ">" 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">
<p>This is a paragraph in which the word <span class="red"><span class="red"></span>
RED</span> is displayed in red by surrounding it with a <span>
tag to which a style class is applied.</p>
</pre>
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.
<style>
.equation {font-family:courier new; font-size:1.8em; font-weight:bold}
</style>
<p class="equation">¼ + ½ = ¾</p>
Listing 4-24. Applying styles to character codes.
¼ + ½ = ¾
Figure 4-24. Character codes with styles applied.