Simple CSS Blockquotes and Pullquotes
Wednesday, August 22nd, 2007 at 4:00 pm
A user-friendly blog layout encourages mere visitors to become readers, so maybe you want to spice things up a little… How about some sweet blockquotes and saucy pullquotes?
There is usually more than one way to skin a cat when it comes to CSS, but here’s my suggestion:
Blockquotes
- When to use blockquotes
A blockquote is used when quoting text from another source, usually another blog or website. Blockquotes are intended to accommodate a larger amount of text, so as a rule of thumb, use blockquotes when you are quoting more than one or two sentences. Don’t forget to link back to the source. - Example
In an article on Wisdump, J David Macor writes:Everyone knows to use block quotes as a way to highlight, well, a quote. And while this is a good technique to use, you should also try a pull quote every once in a while.
As you can see, I went for the tried and tested over-sized quotation marks to give the blockquote some visual appeal.
- Images
You will need to create two images - the opening and closing quotation marks. What they look like is up to you! - The CSS
.blockquote {
background-image: url(images/open-quote.gif);
background-repeat: no-repeat;
background-position: left 5px;
padding-left: 30px;
font-style: italic;
}
.blockquote span {
background-image: url(images/close-quote.gif);
background-repeat: no-repeat;
background-position: right bottom;
display: block;
padding-right: 30px;
} - The HTML
<blockquote><span>Everyone knows to use block quotes as a way to highlight, well, a quote. And while this is a good technique to use, you should also try a pull quote every once in a while.</span></blockquote>
Note the span to accomodate the closing quotation marks.
Pullquotes
- When to use pullquotes
teasers intended to draw the attention of a viewer Pullquotes are teasers intended to draw the attention of a viewer by giving a sneak preview of the content. They are quite common in magazines and newspapers and are usually short extracts from the article. Pullquotes are usually separated from the rest of the text by appearing in a bigger, or different font. They often contain surprising, interesting or important snippets, without giving too much away! A pullquote is a focal point on the page. Use them sparingly - more than one or two pullquotes per article, will defeat the purpose. - The problem…
Unlike blockquotes, there is no HTML element for pullquotes. Since the text of a pullquote appears twice on the page (once in the article and once in the pullquote) you should try and distinguish between the two in your markup. I suggest using a heading element for the pullquote. - The CSS
.pullquote {
padding: 10px;
float: right;
width: 200px;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 20px;
border-top-width: 2px;
border-bottom-width: 2px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #694e1c;
border-bottom-color: #694e1c;
font-size: 16px;
text-align: center;
line-height: 36px;
font-family: Arial, Helvetica, sans-serif;
font-style: italic;
font-weight: normal;
} - The HTML
<h4 class="pullquote">put the text for the pullquote here</h4>
The overall layout of the header, sidebar(s), navigation and footer is important for the success of any blog, but that’s not where it ends - don’t forget the layout of your text! A user-friendly content layout will engage visitors, encouraging them to read your blog.
Add your thoughts below!
Jon Wilson Says:
August 22nd, 2007 at 4:09 pm
Honestly, I do enjoy a good pullquote.
redwall_hp Says:
August 23rd, 2007 at 4:42 pm
I used to use pullquotes, but I forgot to put an entry for them in webmaster-source’s stylesheet after I redesigned it. I need to do that soon.
SkyLuke Says:
August 23rd, 2007 at 4:50 pm
Nice. Thank you.
yichi Says:
August 23rd, 2007 at 8:23 pm
It’s definitely nice pullquote, I thought it was kinda divs before.
Allen Baranov Says:
August 24th, 2007 at 1:13 pm
Excellent article. Thank you very much.
Now I need to rush out and play with my blog.
Blogsolid Says:
August 24th, 2007 at 1:29 pm
I am glad you found this useful!
Manny Fresh Says:
August 24th, 2007 at 3:53 pm
Wow, nice article!! I’ve been wanting to add these 2 elements into some sites I have designed but hadn’t really researched it. You make is look easy to manage and work. Thanks for the info! :-)
Nekoyo Says:
August 26th, 2007 at 6:04 pm
Thanks for that article, it explains really nicely how to use pullquotes, which I really didn’t know before! You are a huge help, this blog is great! You’ve just gained another reader :-)
Blogsolid Says:
August 27th, 2007 at 7:00 am
Hi Nekoyo, good to have another reader on board! Thanks for letting me know about the colour variation on the image below the navigation. I hope it is sorted out now :-)
Javier Says:
August 28th, 2007 at 12:59 pm
Thanks :)
sbpoet Says:
September 15th, 2007 at 12:46 am
Wow.
As a TypePad useer who does not use advanced templates, I have access to CSS, but not to Stylesheets.
Would these work for me?
I’m hoping so.
Jenny Says:
September 23rd, 2007 at 4:24 am
I’ve always wondered how you do pullquotes. I’ve been wanting to use them for a while. Thanks for the tips, I’m definately going to use them.
Melissa Says:
October 9th, 2007 at 1:46 am
Great technique for pullquotes, it is interesting how there are many ways to display things the same way though, as I do it slightly differently!
Blogsolid Says:
October 9th, 2007 at 8:37 am
Hey Jenny and Melissa
Your blogs look similar, are you sisters or something? :)
That’s one cool (and confusing) thing about CSS - there are usually a few different ways to solve any problem!
bart Says:
November 26th, 2007 at 7:15 pm
Nice technique, although the span should be a block-level element such as a p or a div.
qrayg Says:
November 26th, 2007 at 7:44 pm
Great article. The CSS could be condensed more though:
.pullquote {
margin: 10px 0 10px 20px;
border-top: 2px solid #694E1C;
border-bottom: 2px solid #694E1C;
padding: 10px;
float: right;
width: 200px;
font: italic normal 16px/36px Arial, Helvetica, sans-serif;
text-align: center;
}
philip Says:
November 26th, 2007 at 8:04 pm
great tips
just an FYI: roger johansson has developed a nice way to make pullquotes without creating redundant markup. his method requires a teeny bit of javascript, but it leaves your markup cleaner.
http://www.456bereastreet.com/.....t_and_css/
Nelson Menezes Says:
November 26th, 2007 at 8:07 pm
Good article; nice CSS. A recommendation, though: since the pullquote is a repeat of some of the body text, it doesn’t make much sense semantically to actually repeat it in the HTML (think screen readers).
It would probably be best to auto-generate the pullquotes using Javascript: any spans with “pullquote” class can be scanned and a pullquote floating DIV generated on the fly for each one.
Blogsolid Says:
November 26th, 2007 at 9:43 pm
Hi grayg, thanks for cleaning up the code. I am working on an article about “cleaner css”, so hopefully I will post that someday!
Philip and Nelson, thanks for the tip! I am often hesitant to use Javascript, simply because I am not very familiar with it. I will have to explore that technique. I have seen it used very effectively on some websites.
Scott Says:
November 27th, 2007 at 7:04 pm
I agree that the span should be replaced with a p tag within the blockquote. I also use the blockquote element with a class “pull” rather than the heading to create the pull quote effect on my blog.
“sbpoet” - your comment makes no sense. CSS is an acronym for cascading style sheet. CSS and stylesheets are the same thing.
Mark Eagleton Says:
November 28th, 2007 at 6:52 am
Inline elements can’t contain block level elements, and sometimes it is necessary to quote multiple paragraphs within a blockquote. In fact, this is what blockquote elements are primarily intended to do. A span element isn’t going to work for most applications.
A blockquote element can contain multiple p elements. In this case, attaching your closing quote image to all child p elements, would result in multiple images. It would be more effective to assign the closing quote image to a generic class that you can give the last child element of the blockquote:
blockquote .last { background: url('image.jpg') no-repeat right bottom; }Then give the last block level element in your blockquote a class of last.
Scott Says:
November 28th, 2007 at 11:26 pm
This will only work in advanced browsers, but I wanted to point it out in lieu of Mark’s last comment.
Rather than manually placing a class on the last paragraph tag, the last-child pseudo class (blockquote p:last-child) could be applied with the same CSS that Mark has outlined. This will automatically place the style on the last paragraph that it a child of a blockquote.
Khristian Says:
December 8th, 2007 at 3:54 pm
Nice style! I think I’ll use it on my blog. And I hope you don’t mind, I’m planning on using your quote-images until I can find some of my own.
o/
Idetrorce Says:
December 15th, 2007 at 2:02 pm
very interesting, but I don’t agree with you
Idetrorce
Innocent Bystander » Blog Archive Says:
December 16th, 2007 at 10:11 am
[…] Simple CSS Blockquotes and Pullquotes. A handy tutorial for later. […]
Some Readers’ Links » Webmaster-Source Says:
December 21st, 2007 at 1:11 pm
[…] Simple CSS Blockquotes and Pullquotes […]
101 CSS Techniques Of All Time- Part2 Says:
January 22nd, 2008 at 12:06 am
[…] Simple CSS Blockquotes and Pullquotes- Blogsolid shows us how to get some sweet blockquotes and saucy pullquotes? […]
test Says:
January 22nd, 2008 at 12:55 am
[…] Simple CSS Blockquotes and Pullquotes- Blogsolid shows us how to get some sweet blockquotes and saucy pullquotes? […]
Ulises Says:
February 3rd, 2008 at 6:11 pm
Thank you! I really love those pullquotes!
I’ve to say I had some troubles with your css and html, i don’t know exactly why cause i don’t know anything about css. lol
I just changed “.pullquote” for “.post-content pullquote” in the style.css
and when i want to use i write text on wordpress.
I don’t know why but with “.pullquote” and with your html it didn’t work. :s
101?CSS????????(?) | ???? Says:
February 12th, 2008 at 7:27 pm
[…] Simple CSS Blockquotes and Pullquotes-???????????blockquotes. […]
Odahkim Says:
February 16th, 2008 at 4:30 pm
Thanks for pullquote, i will need it soon or later.
Recursos y Tutoriales » Blog Archive » Tecnicas Css 1ยช parte Says:
February 22nd, 2008 at 1:32 pm
[…] Simple CSS Blockquotes and Pullquotes- Blogsolid shows us how to get some sweet blockquotes and saucy pullquotes? […]
Web Designer Group Says:
February 22nd, 2008 at 1:33 pm
Thanks for such nice design of your blog except color scheme, too much contrast. The post is useful. Introduction to pullquotes and usage of both, pull quotes and double quotes, depicted by you, is very good.
Hotlink caller ringtone Says:
May 13th, 2008 at 2:39 pm
Hotlink caller ringtone
Free download mobile ringtone
Free cricket ringtones
Free cricket ringtone
air mattress Says:
May 15th, 2008 at 3:19 pm
air mattress
angela penbrook
angels wife lovers
anika noni rose http
animal porn
animated christmas cards
animated emoticons
aniston cox kiss
aniston sedu hairstyles
anonib
anti depressive living prescription
anytime organizer
anyvi…
Block Quotes and Pull Quotes: Examples and Good Practices | Design Showcase | Smashing Magazine Says:
June 12th, 2008 at 4:51 pm
[…] Simple CSS Blockquotes and Pullquotes […]
Block Quotes and Pull Quotes: Examples and Good Practices Says:
June 16th, 2008 at 1:23 pm
[…] Simple CSS Blockquotes and Pullquotes […]
Block Quotes and Pull Quotes: Examples and Good Practices - Billy Blog Says:
June 17th, 2008 at 1:36 pm
[…] Simple CSS Blockquotes and Pullquotes […]
?? » Blog Archive Says:
July 11th, 2008 at 2:38 am
[…] Simple CSS Blockquotes and Pullquotes-???????????blockquotes. […]
Best Solution for Web :: 101 CSS Techniques Of All Time :: July :: 2008 Says:
July 12th, 2008 at 9:19 am
[…] Simple CSS Blockquotes and Pullquotes- Blogsolid shows us how to get some sweet blockquotes and saucy pullquotes? […]
Four New Blockquotes And How You Can Make Them Says:
July 24th, 2008 at 2:01 pm
[…] Quotes And Pull Quotes - Examples & Good Practices Simple CSS Blockquotes and Pullquotes Six Ways To Style […]