HTML5 banner image.

The blockquote tag’s default styling results in a block-level block of text with a left indent.

The following HTML code:

<h1>HTML &lt;blockquote&gt; (with a Shakespeare parody)</h1>
<blockquote>
	To slack, or not to slack, that is the question;<br />
	Whether 'tis nobler in the mind to suffer<br />
	The zeros and low marks of outrageous assignments,<br />
	Or to take pens against a sea of compositions,<br />
	And by opposing, finish them.
</blockquote>

<p>To understand the <code>quote</code> attribute used in the CSS, read the w<sup>3</sup>school's <a href="https://www.w3schools.com/cssref/pr_gen_quotes.asp">https://www.w3schools.com/cssref/pr_gen_quotes.asp</a>.</p>

<p>Shakespeare parody credit: <a href="https://www.angelfire.com/oh/Pretzel/Parody.html">Enoch Tung</a></p>

<p>Adapted from Chris Cordier's : <a href="https://css-tricks.com/snippets/css/simple-and-nice-blockquote-styling/">https://css-tricks.com/snippets/css/simple-and-nice-blockquote-styling/</a></p>

results in the following:

HTML <blockquote> (with a Shakespeare parody)

To slack, or not to slack, that is the question;
Whether ’tis nobler in the mind to suffer
The zeros and low marks of outrageous assignments,
Or to take pens against a sea of compositions,
And by opposing, finish them.

To undertsand the quote attribute used in the CSS, read the w3school’s https://www.w3schools.com/cssref/pr_gen_quotes.asp.

Shakespeare parody credit: Enoch Tung

Adapted from Chris Cordier’s : https://css-tricks.com/snippets/css/simple-and-nice-blockquote-styling/

The below Codepen uses CSS to add some visual impact to the blockquote element.

See the Pen Blockquote CSS by David Fox (@foxbeefly) on CodePen.

By foxbeefly

PHP / MySQL Developer. HTML, CSS and some JavaScript.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.