Published on Feb 1, 2021

Sample Blockquote HTML and CSS

Sridhar Katakam

This article provides the HTML and CSS for styling blockquotes like so:

HTML:

<blockquote class="blockquote">
<p>For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.</p>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

CSS:

.blockquote {
border-left: 4px solid #65bec2;
padding-left: 16px;
}
.blockquote-footer::before {
content: "\2014 \00A0";
}

Source.

tagschevron-leftchevron-rightchainangle-rightangle-upangle-downfolder-omagnifiercrossmenuchevron-down