Blockquote Styling using HTML & CSS – Web Development

How to style the blockquote element in your HTML and CSS document. Stylize your Blockquote elements.

Share

Creating blockquote in HTML document is not difficult as just enclose your text in <blockquote>your blockquote </blockquote>.  In standard-compliant browsers block quote displays a quote sign before it. But in IE displays with a thick left border and a light grey background.
Unlike other block quote techniques, you do not need to write extra <p> tag inside. As such, it turns a paragraph into an inline-styled element to keep the content from dropping below the quote.

HTML for Blockquote

<blockquote>
 Pellentesque habitant morbi tristique senectus et netus. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.
 </blockquote>

CSS for Blockquote

To design your element like bottom of the article you need to copy and paste the CSS. Which let you make your paragraph more readable and stylish.

blockquote {
 background: #f9f9f9;
 border-left: 10px solid #ccc;
 margin: 1.5em 10px;
 padding: 0.5em 10px;
 quotes: "\201C""\201D""\2018""\2019";
 }

 blockquote:before {
 color: #ccc;
 content: open-quote;
 font-size: 4em;
 line-height: 0.1em;
 margin-right: 0.25em;
 vertical-align: -0.4em;
 }

 blockquote p {
 display: inline;
 }
Blockquote Style CSS & HTML twoclock

Blockquote Style CSS & HTML

Leave a Reply

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