Text Styles
- You can also utilize a motley of styles that affect how your text will look. The following table reviews some of the more commonly used styles.
| Opening Tag/Closing Tag | Description |
|---|---|
| <ADDRESS>...</ADDRESS> | Used for address information usually at the bottom of the page. |
| <B>...</B> | Makes the text bold between the tags |
| <BASEFONT>...</BASEFONT> | Sets the default font size, color and font face such as <BASEFONT = COLOR = "RED" FACE = "ARIAL" SIZE = "4">. Is overridden by the <FONT> tag.[1] |
| <BLINK>...</BLINK> | Makes the text .[2] |
| <CITE>...</CITE> | A quotation or a reference to another source |
| <CODE>...</CODE> | Fixed width font used for displaying computer code |
| <EM>...</EM> | Emphasizes the text, usually by making it italic. |
| <FONT>...</FONT> | Changes the look of a font using the same parameters as <BASEFONT> above.[3] |
| <I>...</I> | Makes the text italicized |
| <KBD>...</KBD> | Indicates text to be entered by the user. |
| <LISTING>...</LISTING> | |
| <PRE>...</PRE> | Specifies pre-formatted text such as programming text. Creates a new block. |
| <SAMP>...</SAMP> | Sample output from programs, scripts, etc. |
| <STRIKE>...</STRIKE> | |
| <STRONG>...</STRONG> | Logical style usually used to bold text. |
| <SUB>...</SUB> | Displays subscripted text |
| <SUP>...</SUP> | Displays superscripted text |
| <TT>...</TT> | Displays monospaced text. Can be displayed inline. |
| <U>...</U> | Underline a bit of text.[5] |
- Consider the following bit of code that demonstrates the usage of these styles
<HTML>
<HEAD>
<TITLE>Styles</TITLE>
</HEAD>
<BODY>
<ADDRESS>
My Address
<BR>City, State Zip
</ADDRESS>
<B>This is bold font</B>
<BR><BLINK>This is blinking font</BLINK>
<BR><CITE>This is cited text</CITE>
<BR><CODE>This is code text</CODE>
<BR><EM>This is emphasized text</EM>
<BR><FONT FACE = "Modern" SIZE = "4"
COLOR = "red">Red, Size 4, Modern Font</FONT>
<BR><I>Italicized font</I>
<BR><B><I>Bolded and italicized font</I></B>
<BR><KBD>Keyboard Font</KBD>
<BR><LISTING>Listing font</LISTING>
<BR><PRE>Pre-formatted font</PRE>
<BR><SAMP>Sample Font</SAMP>
<BR><STRIKE>Strike through font</STRIKE>
<BR>H<SUB>2</SUB>0
<BR>e = mc <SUP>2</SUP>
<BR><U>Underlined Font</U>
<BR><XMP>Example Font</XMP>
</BODY>
</HTML>
- The following figure shows what the previous code will look like when interpreted by a web browser
Additional Resources:
Text level elements - Character styles
Positioning TextIntroduction to Web Design | Table of Contents
Exercise Three
