{"id":174,"date":"2008-07-15T21:32:16","date_gmt":"2008-07-16T02:32:16","guid":{"rendered":"http:\/\/cssnewbie.com\/?p=174"},"modified":"2008-07-15T21:32:16","modified_gmt":"2008-07-16T02:32:16","slug":"six-ways-style-blockquotes","status":"publish","type":"post","link":"https:\/\/cssdeck.com\/blog\/six-ways-style-blockquotes\/","title":{"rendered":"Six Ways to Style Blockquotes"},"content":{"rendered":"

\"\"<\/a><\/p>\n

The blockquote XHTML tag<\/strong> is a fairly useful (if somewhat underused) element. Semantically speaking, a blockquote should be used any time you\u2019re quoting a longer piece of text from another source \u2013 another speaker, another website, whatever. It\u2019s a way of setting the text apart, and showing that it came from some other source. Stylistically, you could accomplish all this with a special class on your paragraph tags… but that wouldn\u2019t be as semantically useful, now, would it?<\/p>\n

Blockquotes do have some styling by default. Most browsers will indent the text in a blockquote tag, which helps the user recognize that the text is different somehow. But who\u2019s to say that we need to stop there? Here are six different ways you could style your blockquotes using CSS.<\/p>\n

Color and Borders<\/h3>\n

Applying a color change to the text and adding a border (along with some additional margins and padding) can really make the blockquote stand out, yet is subtle enough to retain a hint of sophistication.<\/p>\n

\"\"<\/a><\/p>\n

blockquote {\n\tmargin: 1em 3em;\n\tcolor: #999;\n\tborder-left: 2px solid #999;\n\tpadding-left: 1em; }<\/pre>\n
Background Colors<\/h3>\n
If you\u2019d like something a little more obvious than just a text color change, you might considering altering your background color instead. This causes the blockquote to \u201cpop,\u201d making it immediately more noticeable. When applying background colors, be sure to account for any tags inside that might alter your margins (such as paragraph tags).<\/p>\n
\"\"<\/a><\/p>\n
blockquote {\n\tmargin: 1em 3em;\n\tpadding: .5em;\n\tbackground-color: #f6ebc1; }\nblockquote p {\n\tmargin: 0; }<\/pre>\n
Background Colors and Borders<\/h3>\n
Of course, we\u2019re not just limited to either-or, here. A background color in addition to a border in a complementary color is a nice effect, particularly on sites that are a little bit more \u201cglossy.\u201d<\/p>\n
\"\"<\/a><\/p>\n
blockquote {\n\tmargin: 1em 3em;\n\tpadding: .5em 1em;\n\tborder-left: 5px solid #fce27c;\n\tbackground-color: #f6ebc1; }\nblockquote p {\n\tmargin: 0; }<\/pre>\n
Background Images<\/h3>\n
We\u2019re also not just limited to colors! Many websites make use of background images in their blockquotes to help distinguish them from the surrounding text. The background image might appear below the text, or perhaps off to the side (like we\u2019ve done here) by way of a wider left padding.<\/p>\n
\"\"<\/a><\/p>\n
blockquote {\n\tmargin: 1em 20px;\n\tpadding-left: 50px;\n\tbackground: transparent url(quote.gif) no-repeat; }<\/pre>\n
Drop-Caps and Styled Lines<\/h3>\n
Borrowing from my Book-Style Chapter Introductions<\/a> article, we can also distinguish our blockquotes by using drop-caps, stylized text, or (in this example\u2019s case) both at the same time. Here, we\u2019re making use of the first-letter and first-line pseudo-classes, so browser support may not be 100% in older browsers.<\/p>\n
\"\"<\/a><\/p>\n
blockquote {\n\tmargin: 1em 2em;\n\tborder-left: 1px dashed #999;\n\tpadding-left: 1em; }\nblockquote p:first-letter {\n\tfloat: left;\n\tmargin: .2em .3em .1em 0;\n\tfont-family: \"Monotype Corsiva\", \"Apple Chancery\", fantasy;\n\tfont-size: 220%;\n\tfont-weight: bold; }\nblockquote p:first-line {\n\tfont-variant: small-caps; }<\/pre>\n
Text and Color<\/h3>\n
Or, if you\u2019d rather go the subtle-but-effective route, you might consider altering the color of the text in the blockquote, as well as the font style or variant. Also in this example, I\u2019m making use of the :before and :after pseudo-classes to insert content into my document \u2013 namely, the quotation marks at the beginning and end of the text. Of course, :before and :after aren\u2019t supported by all browsers, so… caveat emptor, and all that.<\/p>\n
\"\"<\/a><\/p>\n
blockquote {\n\tcolor: #66a;\n\tfont-weight: bold;\n\tfont-style: italic;\n\tmargin: 1em 3em; }\nblockquote p:before {\n\tcontent: '\"'; }\nblockquote p:after {\n\tcontent: '\"'; }<\/pre>\n
You can see all of these examples live here.<\/a> And if you\u2019ve seen any other great examples of well-styled blockquotes in the wild (or just have a wild idea yourself), I\u2019d love to hear about them: leave me a comment!<\/p>\n
Share and Enjoy !<\/h3>
0<\/span><\/span>Shares<\/small><\/div>
<\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"
Blockquotes do have some styling by default. Most browsers will indent the text in a blockquote tag, which helps the user recognize that the text is different somehow. But who\u2019s to say that we need to stop there? Here are six different ways you could style your blockquotes using CSS. […]<\/p>\n
Read Article<\/a><\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[168,192],"tags":[208,250],"_links":{"self":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/174"}],"collection":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/comments?post=174"}],"version-history":[{"count":0,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/174\/revisions"}],"wp:attachment":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media?parent=174"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/categories?post=174"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/tags?post=174"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}