A blockquote is a XHTML tag which is purposely used element in an article. The basic usage of blockquote in an article is when an author wants to post a thought, or a long piece of sentence from another resources or another author. Just like I did on my testimonials page, where the text posted is in voice of a different author, and hence I wrapped it between a blockquote tag. Screenshot below might just clear you a bit.
A blockquote usually highlights a text and break it apart from main content. For idealistic authors blockquote is tool to make an article more interesting for the reader. A double quote character (“ This is my thought! “) represents the content as a phrase, quote or a thought.
Usually every web browser has a default styling for Blockquotes, but we can always refine a default styling with something in relevance with theme, or may be out of the box design. In this article, I will share 3 best ways to style blockquote for your blog, using CSS.
Style 1: Blockquote styling with Images
With CSS, we are no just limited to color, we can always use background images so as to make blockquote distinct with content. Adding image to blockquote will make it eye-catchy and elegant. We will also have to add left padding, so that text doesn’t overlap the image. Screenshot below will make it more clear:
Below, is the CSS code to add an image to blockquote which you can append in theme’s stylesheet, STYLE.CSS or CUSTOM.CSS (for Thesis Theme):
[css]
blockquote{
background:url(‘blockquote.png’) no-repeat;
padding: 5px 5px 5px 20px;
border:3px solid #ddd;
}
[/css]
Style 2: Blockquote styling with Drop Caps
Adding Drop caps to a content, is a Latin initialis typographic approach, which means standing at the beginning. Drop cap is decorating the initial letter of a paragraph and making it more attractive. In this example, I have added drop cap to blockquote, using the pseudo class to increase the size of the first letter in the paragraph. You can also refer the screenshot below, to add drop cap in blockquote:
Below, is the CSS code to add an image to blockquote which you can append in theme’s stylesheet, STYLE.CSS or CUSTOM.CSS (for Thesis Theme):
[css]
blockquote{
background:#fff;
padding: 10px;
border-left:2px dashed #ddd;
}
blockquote p:first-letter {
float: left;
margin: 5px 3px 1px 0;
font-family: Georgia;
font-size: 40px;
font-weight: bold;
}
[/css]
Style 3: Blockquote styling with Fonts & Colors
If you find above styles, like using images and drop caps, a bit complex then you can consider another way which is simple yet highly effective style for blockquote. Font property itself has so many attributes for styling, for instance font-style (italics) or font-variant (small-caps). In this example, will require the use of pseudo-classes in order to insert content before and after the blockquote. Screenshot will clear it more:
Below, is the CSS code to add an image to blockquote which you can append in theme’s stylesheet, STYLE.CSS or CUSTOM.CSS (for Thesis Theme):
[css]
blockquote {
color: #e33e00;
font-style: italic;
font-family:’Courier New’, Courier, monospace;
padding:20px;
background:#fff;
}
blockquote p:before {
content: ‘"’;
font-size: 30px;
}
blockquote p:after {
content: ‘"’;
font-size: 30px;
}
[/css]
I am using blockquote styling for my blog as well, and you can see the demo as below.
Blockquote Style Demo:
A body makes his own luck, be it good or bad.
If you have seen any other example or have an idea to style a blockquote, I would like to hear from you. If you have any queries or if further assistance is required in regard of the article, post comment as your feedback.
