Blogger: CSS for markup of blockquote and code

I recently decided to switch to a more semantic markup for my posts. For example, I wanted to use the code element for pre-formatted multi-line code. This is what I came up with.

Set in Settings|Formatting the option Convert line breaks to No. Otherwise blogger will insert br elements for every line break in your post, which makes proper styling impossible. OTOH, formatting your posts with line breaks instead of HTML markup will of course not work any more.

Open the template (Design|Edit HTML) and add the following to the CSS within the b:skin tags: blockquote { font-style: italic; margin-top: 1em; margin-bottom: 1em; margin-left: 10px; } code { white-space: pre; font-size: 80%; display: block; margin-left: 10px; margin-top: 0em; margin-bottom: 1em; }