Saturday, August 12, 2017

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:
Team +Pinfoltd 



SHARE THIS

1 comment:

  1. Brother, nice article, but you didn't explain how to style it. Commenting from uchetechs.com

    ReplyDelete

People Are Reading...