Adding nicely formatted blockquote sections to your site

I’ve always liked those nicely formatted source code blocks that most sites have. I finally decided to dig a little bit to see exactly what they use to format them. It’s actually pretty simple, just add something similar to this in your CSS file, and there you go:

blockquote {
   clear:both;
   margin:0;
   padding: 1em;
   border: 1px dashed darkorange;
   color: black;
   background-color: #f9f9f9;
   line-height: 1.1em;
   font-family: Courier New, Courier, mono;
   font-size: 12px;
   font-style: italic;
}

That’s pretty much it. Doesn’t that look nice? I’m still not sure that the background color matches my site perfectly, but it’s much better than the horrible blockquote I had before.

One Response to “Adding nicely formatted blockquote sections to your site”

  1. Fernando Says:

    IMHO, italic does not help much to readability.

    In regard of the rest, it’s a nice presentation.

    (nice and usefull web, thanx)

Leave a Reply