Documents
Resources
Learning Center
Upload
Plans & pricing Sign in
Sign Out

Pure CSS Blockquote Styling

VIEWS: 3 PAGES: 2

Ever since the days of print, it has been common to style quotations and cover blurbs with oversized quotation marks floating along the left side.

More Info
									Pure CSS Blockquote Styling
Ever since the days of print, it has been common to style quotations and cover blurbs
with oversized quotation marks floating along the left side. The practice is alive and well
in the internet age, though the technique usually used is a background image.
It’s 2012, already! Why are we still relying on pictures of typographical symbols? Let’s
do it with the power of CSS!




Let’s start with some simple HTML. Before we can style anything, we need to create our
blockquote. While we’re at it, a cite element is a nice, semantic way to attribute the
quote to its originator.
 <blockquote>
1Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget leo nunc, nec tempus
2bibendum velit fringilla vitae! Lorem ipsum dolor sit amet, consectetur adipiscing elit.
3porta facilisis tortor, vitae bibendum velit fringilla vitae!
4<cite>Somebody famous</cite>
 </blockquote>
Now some CSS to provide some basic styling for the blockquote. Leaving the default
browser style isn’t going to look great, so we’ll use a largish serif font with a little extra
line spacing. And a slightly lighter color. Extra-dark grey adds a subtle variation from
your main body text.
1      blockquote {
2      font-family: Georgia, serif;
3      font-size: 18px;
4      font-style: italic;
       width: 500px;
5      margin: 0.25em 0;
6      padding: 0.25em 40px;
7      line-height: 1.45;
8      position: relative;
9      color: #383838;
       }
10
11
Now for the fun part: the giant quotation mark. The :before pseudo-element can be used
to dynamically insert content before the text of the element, and style the content you
insert. This is great for decorative text, like stylistic curly-quotes. The trick is to use an
escaped hexadecimal representation of the desired character, and a little bit of fiddly
positioning stuff to make it sit in the right position.
1
2      blockquote:before {
       display: block;
3      content: "\201C";
4      font-size: 80px;
5      position: absolute;
6      left: -20px;
       top: -20px;
7      color: #7a7a7a;
8      }
9
That’s the most difficult part. You may have to experiment with the size and positioning
until it looks right, though. Once everything looks nice, you can apply the same
technique to style the citation. Using the :before pseudo-element, you can insert an em
dash and a space before the text.
1
2        blockquote cite {
         color: #999999;
3        font-size: 14px;
4        display: block;
5        margin-top: 5px;
6        }
7
         blockquote cite:before {
8        content: "\2014 \2009";
9        }
10
Easy, isn’t it? The effect should work in all modern browsers, and IE8. (IE8 will only
process the pseudo-element if your document has a doctype declared, but you should
have one of those already…) In browsers that don’t support it, the added content simply
won’t appear, leaving the main text of the blockquote (and the citation) intact. The other
styling will remain, of course, so it should still look good enough.
You can see a live demo here.

								
To top