Formatting Block Quotes and Coloring Text

Print This Procedure ( doc :: pdf )

You can format text as a block quote to set off the text from the surrounding body text. Generally, browsers interpret the <blockquote></blockquote> tag set by indenting the enclosed text’s left and right margins. If you really want to indent your paragraph, you can nest block quote commands inside one another, as here: <blockquote><blockquote></blockquote></blockquote>.

In this section, you’ll create block quotes with maroon text:

1.      Open index.html in a text editor if necessary, click after best:</p> in the second cell of the table’s second row, press Enter twice, and press Tab.

2.      Type <blockquote><blockquote> to create a block quote nested within a block quote.

3.      Press Enter, press Tab, and type the following:

<span style=”color: maroon;"><p><em>Chris is by far the best music teacher I've ever had! She taught me more than I could have learned in a lifetime from Viktor McTonedeaf, the Royal Music Instructor!</em></p>

Notice that the color attribute in the font tag is used to modify the color of the paragraph text.

4.      Press Enter twice, press Tab, and type the following:

<p align="right"><em>- Moe Zart</em></p>

This inserts a right-aligned, italicized name, which is associated with the block quote entered in step 3.

5.      Press Enter twice, press Tab, and type the following:

<p><em>Chris Soll is the best teacher I had before "the incident" that ended my professional music career--she's a true master!</em></p>

6.      Press Enter twice, press Tab, and type:

<p align="right"><em>- Vincent Vanngo</em></p>

7.      Press Enter, press tab, and type </span> to end the maroon font color formatting.

8.      Press Enter twice, press Tab, and type </blockquote></ blockquote> to end the block quote formatting setting.

9.      Save index.html.

Your block quote text should display in your HTML document as shown in the following figure.

Adding block quotes to offset text

The next figure shows the block quote text when it’s viewed in a browser.

Viewing blockquotes in Internet Explorer