CSS Blockquotes and Inline Quotes Styling

Homepage › Forums › Articles › Programming › Markup Languages and Style-sheets › CSS Blockquotes and Inline Quotes Styling

Tagged: , , , , , , , ,

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

Viewing 1 post (of 1 total)
  • Author
    Posts

  • DevynCJohnson
    Keymaster
    • Topics - 437
    • @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.

  • Author
    Posts
Viewing 1 post (of 1 total)