Creating a Blockquote

Creating a blockquote can make a more impactful article by drawing visual attention to important information in a stylistic and professional way.

Example of a blockquote

CSS

blockquote{
    display:block;
    background: #fff;
    padding: 15px 20px 15px 45px;
    margin: 0 0 20px;
    position: relative;
    font-size: 14px;
    line-height: 1.2;
    color: #666;

    border-left-style: solid;
    border-left-width: 15px;
    border-right-style: solid;
    border-right-width: 2px;
}
blockquote::before{
    content: "\201C";

    font-family: Georgia, serif;
    font-size: 60px;
    font-weight: bold;
    color: #FF9540;
    position: absolute;
    left: 10px;
    top:5px;
}
blockquote::after{
    content: "\201D";
    font-family: Georgia, serif;
    font-size: 60px;
    font-weight: bold;
    color: #FF9540;
    float: right;
}
blockquote.mainQuote{
    border-left-color: #FF9540;
    border-right-color: #FF9540;
}
span.quoteDef{
    color:#434a53;
    font-size: 20px;
    font-weight:bolder;
}

HTML

<blockquote class="mainQuote">
    <span class="quoteDef">
         Successful people do what unsuccessful people are not willing to do. Don't wish it were easier; wish you were better.
    </span>
</blockquote>

According to W3, the tag "specifies a section that is quoted from another source." Browsers interpret information under that tag as being indented.

What does the ::before and ::after mean anyway? This places something (represented under content:"/201C" and content:"/201D") either before or after whatever tag it is associated with - in this case, that's a blockquote. /201C is Unicode for left double quotation mark, while /201D is a right double quotation mark.

To get the colored rectangles on either side of the quoteblock, we're simply changing the border width and color of the left and right side.

    /*Assigning width of border*/
    border-left-style: solid;
    border-left-width: 15px;
    border-right-style: solid;
    border-right-width: 2px;

    /*Assigning color of border*/
    border-left-color: #FF9540;
    border-right-color: #FF9540;