CSS Blockquotes and Inline Quotes Styling

This topic was published by and viewed 750 times since "". The last page revision was "".

Viewing 1 post (of 1 total)
  • Author
    Posts
  • DevynCJohnson
    DevynCJohnson
    Keymaster
    • Topics - 444
    • @devyncjohnson

    Using Cascading Style-Sheets (CSS) is a powerful method for customizing a website and making certain HTML tags/elements have a particular appearance. Below is the code snippet used on DCJTech to make <blockquote> and <q> tags have their appearance.

    blockquote{display:block}
    q{display:inline}
    blockquote,q{font-family:Times,Georgia,Helvetica;quotes:&ldquo&rdquo&lsquo&rsquo&laquo&raquo;font-style:italic}
    blockquote{border-left:5px solid #ccc;margin:20px 10px;background-color:#dfd;padding:15px;clear:both}
    blockquote:before,q:before{content:open-quote}
    blockquote:after,q:after{content:close-quote}
    blockquote:before{font-size:40px;line-height:1px;vertical-align:-10px}
    blockquote:after{font-size:40px;line-height:1px;vertical-align:20px;float:right}
    blockquote p{margin-bottom:10px!important}
    blockquote p:last-child{margin-bottom:0}

    Notice that the third line specifies the quotes to use (quotes:) in a blockquote or inline quote (<q>). The first two HTML entities specify the first quote-pair choice (opening and closing quotes, respectively). The pairs after the first pair of HTML entities specify quotes to use if there is a quote within a quote.
    Lines 5 and 6 specify that an opening quote comes before the quote element and a closing quote after the element.

Viewing 1 post (of 1 total)