Stylish CSS Blockquote Design | HTML Blockquote Highlight & Pure CSS

Stylish CSS Blockquote Design

Explain with Example how we can Create a Custom Stylish Blockquote Design using CSS & HTML?

I hope you will be aware of blockquote, if you don’t aware then let me tell you. In HTML the

blockquote element defined a particular section that is quoted from another source. suppose

that when you design your web page you want to show someone’s quotes or statement then in

that condition you will be used blockquote.


Therefore, when you see the multiple websites you will be seen different kinds of blockquote

design. if you are using CMS (Content Management System) platform like WordPress then

there are also have a feature to put the blockquote. but the default blockquote style design in

HTML or WordPress is unstylish or non-catchy.


Furthermore, you can customize the blockquote’s styles after reading this blog post on

blockquote. In this tutorial, you will learn, how you can change the style and create an

attractive blockquote Section using CSS and HTML.


Also, you will see in this post stylish CSS Blockquote Design, a pure CSS and HTML Blockquote

Highlighter. it will be an animated quotation icon. The important thing is that you can use it on

any websites like CMS website or scratch coding on just putting the CSS Codes given as below.

Source code For Stylish CSS Blockquote Design

First of all, I just put the main div which class name container class= "container". after that, I will put the blockquote inside the main div. I used Ionicons Ico for the purpose of to create animated quotation icons. For the Large screen or desktop, I put the line and icon on the left side. For creating the icon and left sides line just put border: 4px solid #efefef;

for placing the icon in the middle of the line, I will use postion: absolute; with top: 50%;. The animation I will use for the quotation icon. therefore, it’s is just rotating on click. To this animation effect, I will use these codes segments.

On the other perspective for small media screen devices like mobile, I will place two-line one for on the top, and second for on the bottom. therefore for creating these, I used the CSS @Media Query. as a result, getting after putting the screen size condition in @media, I will be added just two lines border-top: 3px solid #efefef; and border-bottom: 3px solid #efefef; furthermore, these time I placed the icons in the middle portion of the top line, for this I have put the code top:0; and left:50%;

furthermore, for placing the <cite> or such as author name I need to add these line margin-top:1em;. in the mobile-friendly responsive version, I give this condition to <cite> and tex-align:right; one thing is more important to notice here these are the main points of this program, and other code segments you will understand better when getting the codes.

Step:1 Creating index.html Page

Step: 2 Create External Style Sheet name as “style.css” put these codes

finally, now you have successfully created Stylish CSS Blockquote Design and A Pure HTML & CSS Blockquote Highlighter. these code segment you can use it on WordPress, only just remove the HTML, Body & container from the CSS section (from External Styles Sheets).