Blog Styling

March 28, 2012
This article describes the way I style things in this blog.

Blockquotes

 I use the following CSS styles for my blockquotes. Final result is:

Example of styled blockquote


blockquote{
  background:#f9f9f9;
  border-left:1em solid #eee;
  margin:1.5em 1em;
  padding:.5em 1em;
  quotes:"\201C""\201D";
  font: italic normal 12pt/1.2em Georgia;
}

blockquote:before{
  color:#808080;
  content:open-quote;
  font-size:4em;
  line-height:.1em;
  margin-right:.25em;
  vertical-align:-.4em;
}

blockquote :first-child{display:inline;}
blockquote :last-child{margin-bottom:0;}

Code block

For code blocks, I use the following style:

pre {
        border:1px dashed #E1E1E1;
        color:#333344;
        background:#FAFAFA;
        font-family:monospace;
        overflow:auto;
        font-size:11px;
        padding:0.5em;
}

Contact? Question?

Comments

Commentaires
I am Pierre Baillet, senior software engineer. I write here mostly on computers and code, games, life and server stuff.