Recipe 12.6. Emphasizing a Quotation

Problem

You want to add emphasis to a quotation by using large and bold quotation marks (see Figure 12-11).

Figure 12-11. The stylized quotation

Solution

First code the markup for the quotation (see Figure 12-12):

<blockquote>  <p>There is a tendency for things to right themselves.</p>  <cite>Ralph Waldo Emerson</cite> </blockquote>

Figure 12-12. Quotation as it would normally appear

Then apply CSS rules to stylize the quote:

blockquote {  padding: 0;  margin: 0;  text-align: center; } p {  font-size: 1em;  padding-bottom: 3em;  text-transform: lowercase;  font-family: Georgia, Times, "Times New Roman", serif;  margin: 0;  padding: 0; }  cite {  display: block;  text-align: center; }

Finally, use pseudo-elements :before and :after to stylize the punctuation in the quotation as well as to place an em dasha horizontal dash equal to the default size of the fontbefore the name of the cited source:

blockquote p:before {  content: "\201C";   font-size: 1.2em;  font-weight: bold;  font-family: Georgia, Times, "Times New Roman", serif; } blockquote p:after {  content: "\201D";   font-size: 1.2em;  font-weight: bold;  font-family: Georgia, Times, "Times New Roman", serif; } cite:before {  content: "\2014 "; } cite {  display: block;  text-align: center; }

Discussion

Pseudo-elements are selector constructs that browsers use first to select portions, and then to stylize a web page that can't be marked up through standard HTML. For instance, you can use pseudo-elements to stylize the first line of a paragraph or, in the case of this recipe, to place generated content before and after an actual element.

In this solution you insert smart quotes around the actual quotation. For the left double quotes, we use this declaration:

content: "\201C ";

Any text that you want displayed after an element needs to be marked off with double quotes. Because you are using double quotes to mark what should be displayed, you can't put another set of double quotes inside the first set. To put quotes around the quotation, you need to use the hexadecimal value for a quotation mark, which is 201C.

Because anything between the quotation marks automatically is generated as is, you need to escape the hexadecimal number that tells the browser to render the quotation marks by placing a forward slash in front of the double quotes.

The content property in the CSS 2.1 specification contains values for easily inserting quotation marks. For example, to re-create the left double quotes, use the following declaration:

content: open-quote;

However, note that open-quote keyword value specification is implemented only in Mozilla and Opera. Also, note that the :before and :after pseudo-elements don't work in Internet Explorer 5+ for Windows and Internet Explorer for Macintosh.

Problem

Figure 12-11. The stylized quotation

Solution

Figure 12-12. Quotation as it would normally appear

Discussion

See Also