The blockquote XHTML tag is a fairly useful (if somewhat underused) element. Semantically speaking, a blockquote should be used any time you’re quoting a longer piece of text from another source – another speaker, another website, whatever. It’s a way of setting the text apart, and showing that it came from some other source. Stylistically, you could accomplish all this with a special class on your paragraph tags… but that wouldn’t be as semantically useful, now, would it?
Blockquotes do have some styling by default. Most browsers will indent the text in a blockquote tag, which helps the user recognize that the text is different somehow. But who’s to say that we need to stop there? Here are six different ways you could style your blockquotes using CSS.
Color and Borders
Applying a color change to the text and adding a border (along with some additional margins and padding) can really make the blockquote stand out, yet is subtle enough to retain a hint of sophistication.
blockquote {
margin: 1em 3em;
color: #999;
border-left: 2px solid #999;
padding-left: 1em; }
Background Colors
If you’d like something a little more obvious than just a text color change, you might considering altering your background color instead. This causes the blockquote to “pop,” making it immediately more noticeable. When applying background colors, be sure to account for any tags inside that might alter your margins (such as paragraph tags).
blockquote {
margin: 1em 3em;
padding: .5em;
background-color: #f6ebc1; }
blockquote p {
margin: 0; }
Background Colors and Borders
Of course, we’re not just limited to either-or, here. A background color in addition to a border in a complementary color is a nice effect, particularly on sites that are a little bit more “glossy.”
blockquote {
margin: 1em 3em;
padding: .5em 1em;
border-left: 5px solid #fce27c;
background-color: #f6ebc1; }
blockquote p {
margin: 0; }
Background Images
We’re also not just limited to colors! Many websites make use of background images in their blockquotes to help distinguish them from the surrounding text. The background image might appear below the text, or perhaps off to the side (like we’ve done here) by way of a wider left padding.
blockquote {
margin: 1em 20px;
padding-left: 50px;
background: transparent url(quote.gif) no-repeat; }
Drop-Caps and Styled Lines
Borrowing from my Book-Style Chapter Introductions article, we can also distinguish our blockquotes by using drop-caps, stylized text, or (in this example’s case) both at the same time. Here, we’re making use of the first-letter and first-line pseudo-classes, so browser support may not be 100% in older browsers.
blockquote {
margin: 1em 2em;
border-left: 1px dashed #999;
padding-left: 1em; }
blockquote p:first-letter {
float: left;
margin: .2em .3em .1em 0;
font-family: "Monotype Corsiva", "Apple Chancery", fantasy;
font-size: 220%;
font-weight: bold; }
blockquote p:first-line {
font-variant: small-caps; }
Text and Color
Or, if you’d rather go the subtle-but-effective route, you might consider altering the color of the text in the blockquote, as well as the font style or variant. Also in this example, I’m making use of the :before and :after pseudo-classes to insert content into my document – namely, the quotation marks at the beginning and end of the text. Of course, :before and :after aren’t supported by all browsers, so… caveat emptor, and all that.
blockquote {
color: #66a;
font-weight: bold;
font-style: italic;
margin: 1em 3em; }
blockquote p:before {
content: '"'; }
blockquote p:after {
content: '"'; }
You can see all of these examples live here. And if you’ve seen any other great examples of well-styled blockquotes in the wild (or just have a wild idea yourself), I’d love to hear about them: leave me a comment!
How to implemented this block quote in the HTML ?
please tell any suggestions…
Pingback: 常用设计元素的高级CSS技巧 | 夜阑小雨,飘洒在岁月的流沙。80后，爱网络，爱小说，爱研究。产品设计，编程代码，网络营销，原创文学， 系统研究。
Old, but very usefull stuff! thx. I try to “rebuild” my old newspaper! This helps a lot!
Pingback: Blockquote formatting. | zukunftsentwurf.de
Pingback: 精通CSS-1: 常用设计元素的高级CSS技巧 | 站长站
Background color and rounded borders is another option
This is a cool tutorial ..
Simple and cool block Blockquote styles. Thanks bro :)
Pingback: Mastering CSS, Part 1: Styling Design Elements - Goodfav Howto
Is it not possible to expand the size of the blockquote? I wrote a post in which I wanted to include an application I wrote for a university but the slightly darker background cuts off before the quote is finished. The indent is correct through and through but the size bothers me. For now, I’ve chosen to upload it as a .pdf file instead but surely there’s a simple way to get around this problem?
Pingback: 精通CSS-1: 常用设计元素的高级CSS技巧 | 中国私服网
Nice styles. Thanks for the CSS codes.
Pingback: Blockquote dan Pullquote - License, Crack, Patch, KeyGen, Hack
Pingback: 精通 CSS 造型設計元素 | QiHi 前端技术分享
Awesome! Thanks for that cool ideas. Really helped me out!
If inomifatron were soccer, this would be a goooooal!
is there any method to add my logo in there…
Sup, that was a impressive posting! Lots of wonderful
help and advice, I am happy that I seen it.
I am certainly going to take note of your webpage! :-)
Politicians are chosen to represent their constituencies on election day.
If we consider the role of news channel and printing house,
they are the main players who provide us deep knowledge of the happenings in country including
the international news. The idea that there existed an all- knowing God who judged.
Feel free to surf to my page; Joachim Bridzinski
I was recommended this website by my cousin. I am not sure whether this post is written by
him as nobody else know such detailed about my trouble.
You are incredible! Thanks!
Understanding both advantages and disadvantages are important in order to choose the best internet marketing strategy.
They only want your money and they want as much of it as
they can possibly get. It’s probably some mix of the two, so I have to
give him props for not going too far in either direction.
No matter if some one searches for his required thing, so he/she needs to be available that
in detail, so that thing is maintained over here.
magnificent issues altogether, you simply won a brand new reader.
What would you suggest in regards to your submit that you just made some days in the past?
Any positive?
They are a very good way to promote business service.
, it is best to go for affiliate marketing being an initial step into the
world of generating impartial income from home. For more information visit: security gives you the protection from
all kinds of worms, viruses and other problems.
What’s Happening i am new to this, I stumbled upon this I’ve found It positively useful and it has aided me out loads.
I am hoping to contribute & aid different users like its aided me.
Great job.
Cool templates for blockquotes.
Flip the stack over and work your way from the oldest piece to the most
recent one. With a bit of effort, you can earn extra income while working in the convenience
of your own home. Mc – Dougall (1920) is reputed to have
been the founder of team building, when he stated that there were five different conditions necessary for a highly productive group,
although other persons of note, such as Sigmund Freud, have also recognized the benefits of team
work.
Holy good God! Thank you for posting this! I have been trinyg to get my CSS right for-ev-er and couldn’t get it right until I found this page (me and HTML/code just don’t get along!) And thanks to the above post I was able to get my frame around the blockquote so YAY I no longer have to type it all out! -Shellie
I have exactly what info I want. Check, please. Wait, it’s free? Awesome!