HTML Blockquote Element, CSS Content and Quote Properties

For an update, please see this post.

9:40 PM. Chilly Evening. Quoting one of my favorite authors, I'm going to write an example for the HTML blockquote element and show you how to style it. In I'm a Stranger Here Myself, Bill Bryson wrote:

In the oddest ways airlines continue to act as if it is still 1955. Take the safety demonstration. Why after all these years do the flight attendants still put a life vest over their heads and show you how to pull the little cord that inflates it? In the entire history of commercial aviation no life has been saved by the provision of a life vest.

I am especially fascinated by the way they include a little plastic whistle on each vest. I always imagine myself plunging vertically toward the ocean at 1,200 miles an hour and thinking: "Well, Thank gosh I've got this whistle."

Bill Bryson, I'm a Stranger Here Myself

I set the background color of the blockquote to blue and painted a plane image with lowered opacity in both x and y directions. The corners of the element are rounded by 4 pixels. There's also the image of the author which I floated to the left and two oversized quotation marks. As insignificant as those marks may seem, the coding behind them is not, possibly because most people are not familiar with the properties being used.

CSS CONTENT PROPERTY

In the oddest ways airlines continue to act as if it is still 1955. Take the safety demonstration. Why after all these years do the flight attendants still put a life vest over their heads and show you how to pull the little cord that inflates it? In the entire history of commercial aviation no life has been saved by the provision of a life vest.

I am especially fascinated by the way they include a little plastic whistle on each vest. I always imagine myself plunging vertically toward the ocean at 1,200 miles an hour and thinking: "Well, Thank gosh I've got this whistle."

Bill Bryson, I'm a Stranger Here Myself

I'll be repeating the same passage from the book because I don't want to quote extensively from the same source. The CSS "content" property allows us to add more content to the page without changing our HTML markup. We generally use it with the :before and :after pseudo-selectors. These pseudo selectors allow us to target the part of the page content just before, or after, a regular element's content. For example, you can use this to target every paragraph on a page and insert something just before or after the paragraph text. The way this works is we say something like: p:before { content: 'Paragraph: '; color: red; } and now every paragraph on the page will start with the word 'Paragraph', in red.

In the blockquotes you see at the top of this post I use the 'content' property to insert the quotes before and after the quoted text. So as you can imagine, that might look a lot like the rule above, but replacing the word Paragraph, with a quote character, and changing the selector to the blockquote element, like this:

blockquote:before { content: '"'; }
blockqutoe:after { content: '"'; }

CSS QUOTES PROPERTY

And that does work, but the resulting quotes are pretty boring. We want some nice looking quotes where the opening and closing quotes are rendered differently. The way to make this happen is with the CSS 'quotes' property, and the 'open-quote' and 'close-quote' values. So, the above rules can be re-written as:

blockquote { quotes: '"' '"'; }
blockquote:before { content: open-quote; }
blockquote:after { content: close-quote; }

This works fine, but it still gives us the same old boring quotes. But one more small change to the quotes property will fix it:

blockquote { quotes: '\201C' '\201D'; }
blockquote:before { content: open-quote; }
blockquote:after { content: close-quote; }

Now we are using some special character codes for the quote values. You can find these in a table in the CSS spec.

I'm including the table here for easy reference:

Character	Approximate rendering	ISO 10646 code (hex)	Description
"	"	0022	QUOTATION MARK [the ASCII double quotation mark]
'	'	0027	APOSTROPHE [the ASCII single quotation mark]
‹	<	2039	SINGLE LEFT-POINTING ANGLE QUOTATION MARK
›	>	203A	SINGLE RIGHT-POINTING ANGLE QUOTATION MARK
«	«	00AB	LEFT-POINTING DOUBLE ANGLE QUOTATION MARK
»	»	00BB	RIGHT-POINTING DOUBLE ANGLE QUOTATION MARK
‘	`	2018	LEFT SINGLE QUOTATION MARK [single high-6]
’	'	2019	RIGHT SINGLE QUOTATION MARK [single high-9]
“	``	201C	LEFT DOUBLE QUOTATION MARK [double high-6]
”	''	201D	RIGHT DOUBLE QUOTATION MARK [double high-9]
„	,,	201E	DOUBLE LOW-9 QUOTATION MARK [double low-9]

As one final touch, you can also set the font properties to affect how the quotes are rendered:

p:before, p:after { font-family: 'Times New Roman'; font-weight: bold; font-size: 3em; }

The other thing we need to do is float the closing quote to the right, to position it correctly at the lower right part of the blockquote:

blockquote:after { content: close-quote; float: right; }

We can also style the blockquote itself to add some styling and color. Following is the entire listing for the CSS.

STYLING THE BLOCKQUOTE ELEMENT

div.post-body blockquote.nu img { float: left; margin-right: 25px; }

div.post-body blockquote.nu span { float: right; }

blockquote.nu:before, blockquote.nu:after {
font-weight: bold;
font-size: 3em;
}
.post blockquote.nu {
width: 490px;
/* an alternative look with the quote narrower and floated to the right
of screen float: right; margin-left: 20px; width: 200px; */

margin: 0px;
padding: 30px;

background: #C6E0FB url('images/aero.png') top left repeat;

-moz-border-radius: 4px 4px 4px 4px;
-webkit-border-radius: 4px;
-goog-ms-border-radius: 4px 4px 4px 4px;
border-radius: 4px 4px 4px 4px;

quotes: "\201C" "\201D";
}

blockquote.nu:before { content: open-quote;
}

blockquote.nu:after { content: close-quote;
float: right;
}


First Note: In the CSS above, I've added a class to all the blockquote selectors, so instead of blockquote:after, I'm writing blockquote.nu:after. That is just to limit the scope of these rules to blockquotes of class "nu", instead of affecting all blockquotes globally. When ever you are selecting by class, you can write .classname, or you can use the element type followed with .classname (with no spaces). In this case I chose to say "blockquote.nu:after for clarity, instead of writing: ".nu:after".

Second Note: If you are not on the Blogger, do not get thrown off by "div.post-body" or ".post" descendant selectors. Your selectors will be simpler because chances are you don't have to watch out for specificity. If I don't write my selector as "div.post-body blockquote.nu img", my rule will be overwritten by another that's higher on the specificity scale. For you, writing them as,

blockquote.nu img { float: left; margin-right: 25px; }

blockquote.nu span { float: right; }

should work. If you have to build descendant selectors, you need to look at your containing elements. Remember "post-body" or "post" are Blogger specific unless you happen to use the same naming convention.

BLOCKQUOTE: CSS FOR THE NARROW VERSION

I'm using double class structure, essentially writing over properties set by the previous blockquote class nu:

.post blockquote.narrow {
background-color: #e8e4b5;
width: 280px;
float: right;
padding: 25px 20px 20px;
margin-left: 20px;
font-size: 12px;
}
div.post-body blockquote.narrow img { float: right; margin-right: 0;
margin-left: 15px;}

The Markup looks like this:

<blockquote class="nu narrow">
<img src="images/bill3.jpg" alt="" />In the oddest
ways airlines continue ..... of a life vest.  

I am especially fascinated ..... Thank gosh I've got this whistle."

<span>Bill Bryson, <a href=" http://www.amazon.com/...">
I'm a Stranger Here Myself</a></span>
</blockquote>

CHANGING THE MARKUP TO TARGET P ELEMENTS

We can improve the look further by placing the end quote right after the text before the author name and book title. Unfortunately there's not a way to do this using the blockquote element but if we changed the markup by specifying a first and last paragraph, we can hook into the p element instead. In the following CSS, I highlighted everything that changed in yellow. First the new markup:

<blockquote class="nuu">
<img src="images/bryson.jpg" alt="" />

<p class="first">
In the oddest ways airlines continue to act as if it is still 1955. Take the safety demonstration.  
Why after all these years do the flight attendants still put a life vest over their heads and 
show you how to pull the little cord that inflates it?  In the entire history of commercial 
aviation no life has been saved by the provision of a life vest.
</p>

<p class="last">
I am especially fascinated by the way they include a little plastic whistle on each vest.  I 
always imagine myself plunging vertically toward the ocean at 1,200 miles an hour and thinking: 
"Well, Thank gosh I've got this whistle."
</p>

<span>
Bill Bryson, <a href=" http://www......">I'm a Stranger Here Myself</a>
</span>
</blockquote>  

div.post-body blockquote.nuu img { float: left; margin-right: 25px; }
div.post-body blockquote.nuu span { float: right; }

blockquote.nuu p.first:before, blockquote.nuu p.last:after {
font-weight: bold;
font-size: 3em;
}

.post blockquote.nuu {
width: 490px;
margin: 0px;
padding: 30px;
background: #e8e4b5 url('images/aero.png')
top left repeat;

-moz-border-radius: 4px 4px 4px 4px;
-webkit-border-radius: 4px;
-goog-ms-border-radius: 4px 4px 4px 4px;
border-radius: 4px 4px 4px 4px;

quotes: "\201C" "\201D";
}

blockquote.nuu p.first:before { content: open-quote; }
blockquote.nuu p.last:after {
content: close-quote;
float: right;
padding-top:20px;
}

In the oddest ways airlines continue to act as if it is still 1955. Take the safety demonstration. Why after all these years do the flight attendants still put a life vest over their heads and show you how to pull the little cord that inflates it? In the entire history of commercial aviation no life has been saved by the provision of a life vest.

I am especially fascinated by the way they include a little plastic whistle on each vest. I always imagine myself plunging vertically toward the ocean at 1,200 miles an hour and thinking: "Well, Thank gosh I've got this whistle."

Bill Bryson, I'm a Stranger Here Myself