Styling Quotes – Blockquote and Pull Quote – Using CSS

While writing articles, sometimes we quoting text from other sources, HTML provides elements to cover this task: blockquote  <blockquote> which used to quote a large section of text, while quote <q> element, used for the short, or inline quotation, usually, these quotes are prefixed by an open-quote character and end up with close-quote) character. These characters need more attention as different browsers display different form, the following figure shows the differences.

sample_quote_generated_by_browsers

this inconsistency is not good for user experience, to solve this, replace these quotes either with images or icon fonts, this day the use of icon fonts more popular than image because it’s flexibility that allows us to style it as usual font (eg: change color, size, shadow, etc…).

Some examples of styling quotes (blockquotes)

There are many examples of styling quotes, this day we’ll style quotes using three different ways: using default quote character of browser, using icon font, and using image. We use ::before and/or ::after pseudo elements as container. If you’re not familiar with these pseudo-elements, please refer to this article: ::before and ::after Pseudo Elements Explained With Examples

Example #1: Style quotes (blockquotes) using browser’s built-in character:

HTML

<blockquote>
	There are many ways to style quotes...
</blockquote>

DOM Structure:

CSS:

blockquote {
	color: #FFFFFF;	
	background: #3E7DB3;
	max-width: 500px;
	margin: 0;
	width: 100%;
	padding: 40px 70px;
	position: relative;
}
blockquote::before,
blockquote::after {
	font-size: 350%;
	font-family: arial;
	display:block;
	position: absolute;
}
blockquote::before {
	content: open-quote;
	line-height: 40px;
	left: 30px;
}
blockquote::after {
	content: close-quote;
	line-height: 30px;
	right: 30px;
}

The Result:

There are many ways to style quotes, though, consider three options to display quote characters, that are: using browser’s default character, icon fonts, or image. The use of icon fonts is the best option because it has many advantages, such as: many variations of fonts, much more flexible, and the most important is it will display the quote characters exactly in the same form across browsers.

Example #2: Style quotes (blockquotes) using icon font

One best solution to overcome the differences of style across browsers is to replace the quote character with an icon, in this case, the icon font, as stated before, the use of icon font has many advantages, such as the ability to change the color and size, so can be suited to the color of the quoted text or the background.

I used icomoon for the icon, you can use your favorite icon font such as font awesome. The styles are same as previous, except we change some style of ::before and ::after pseudo-elements:

style_quotes_with_css_blockquote_builtin_character

HTML:

<blockquote class="callout-blockquote">
	There are many ways to style quotes...
	<div>WebDevCorner.com</div>
</blockquote>

CSS

.callout-blockquote {
	background: #FFD6D6;
	border: 1px solid #FFAEAE;
    border-radius: 10px;
    color: #131313;
	text-align: justify;
	max-width: 500px;
    width: 100%;
    padding: 40px 30px 30px;
    margin: 0;
    position: relative;
	box-shadow: 5px -5px 8px -1px rgba(199, 199, 199, 0.6);
}

.callout-blockquote:before {
	font-family: 'icomoon';
    content: "\e900";
    color: #FF4242;
	line-height: 40px;
	top: -20px;
    left: 20px;
    text-shadow: 7px 5px 10px rgba(0, 0, 0, 0.26);
}
.callout-blockquote:after {
	content: "";
	border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 20px solid #FF6C6C;
    width: 0;
    height: 0;
    position: absolute;
    bottom: -20px;
}
.callout-blockquote div {
	color: #868686;
	font-style: italic;
    font-size: 95%;
	text-align: right;
	position: absolute;
	bottom: -50px;
	right: 0;
	margin-top: 15px;
}

Another example of styling quotes using icon font:

style_quotes_with_css_blockquote_and_iconfont

HTML:

<blockquote class="flat-blockquote">
	There are many ways to style quotes...
	<div>WebDevCorner.com</div>
</blockquote>

CSS:

.flat-blockquote {
	color: #252525;
	background: #FFE66B;
	text-align: justify;
    border-left: 12px solid #EF911C;
	position: relative;
	max-width: 500px;
	width: 100%;
	padding: 40px 60px 30px 70px;
    margin: 0;
}
.flat-blockquote:before {
	font-size: 220%;
	font-family: arial;
	display:block;
	position: absolute;
}
.flat-blockquote:before {
	font-family: 'icomoon';
	content: "\e900";
	color: #B1A25B;
	line-height: 40px;
    left: 20px;
    top: 35px;
}
.flat-blockquote:after {
	content: "";
}
.flat-blockquote div {
	color: #868686;
	font-style: italic;
    font-size: 95%;
	text-align: right;
	margin-top: 15px;
}

Example #3: Style quotes (blockquotes) using image background

The last option is using image as a background. This option may be not relevant for modern web design, as using a background has many limitations rather than icons, such as fixed color and size, but may be in some situation we still need this technique.

style_quotes_with_css_blockquote_and_images

HTML:

<blockquote class="img-blockquote">
	There are many ways to style quotes...
	<div>WebDevCorner.com</div>
</blockquote>

CSS:

.img-blockquote {
	background: #FFFFFF;
    color: #191919;
	max-width: 500px;
	width: 100%;
	padding: 40px 90px;
    margin: 0;
	position: relative;
    text-align: justify;
}
.img-blockquote::before,
.img-blockquote::after {
	display:block;
	position: absolute;
    top: 50%;
	margin-top: -40px;
}
.img-blockquote::before {
    content: url(bg_open_quote.png);
	left: 20px;
}
.img-blockquote::after {
	content: url(bg_close_quote.png);
    right: 20px;
}
.img-blockquote div {
	color: #868686;
	font-style: italic;
    font-size: 95%;
	text-align: right;
	margin-top: 15px;
}

Other Examples

This is other great creative examples of styling quotes: Modern Block Quote Style

Leave a comment

Like Us

Social