Styling The Quotation Marks Of The Blockquote HTML Tag.

As you may already have known by now, the blockquote HTML tag is used to create quotes that are in block form and that by default, there is no quotation marks attached to the quote. This means, you have absolute control over the use and styling of quotation marks.

---

---

This fact brings a question. How can I style just the quotation marks without affecting the remain text of the quote? In this post I am going to explain to you, the way you can do this. But first, take a look at the blockquote and it's quotation mark below, that is what we are going to use as example.

This is the blockquote code:

    <blockquote>
        <p class="quote">With this post, we intend to teach you how to style the quotation mark only in the HTML blockquote tag. </p>
        <p> <b> - Pinfoltd </b> </p>
    </blockquote>

This is the CSS code:

  blockquote {
        font-style: normal;
        background:#d9ead3;
        padding:24px 40px 16px 25px;
    }
   
    blockquote p {
        font-size:14px;
        text-align:right;
        padding:0;
        color: #134977;
        display:block;
    }
   
    blockquote p.quote {
        font-size:16px;
        text-align:left;
        padding:0 0 10px 20px;
        position:relative;
    }
   
    blockquote p.quote:before, blockquote p.quote:after {
        content: '”';
        font-size: 32px;
        font-family: "Exotc350 Bd BT", Georgia, "Times New Roman", Times, serif;
        color: #134977;
        font-weight:bold;
        vertical-align:top;
        line-height:0.8
    }
   
    blockquote p.quote:before {
        content: '“';
        position:absolute;
        left:0;
        top:-9px;
    }

Also Read:

• The Blockquote HTML Tag
• Working With border-radius CSS3 Property
• The Code/HTML Entities For Adding Three Dot/Ellipsis "..." To Words (Tips To Website Developers)
• Is The HTML Anchor rel Attribute Useful To Browsers?
• How To Manipulate The Speed Of The Marquee HTML Tag

Team +Pinfoltd 

---

SHARE THIS