<div class="container">
  <p>
    <q class="french">This is a quote quoting someone. It gets double French quotation marks. <q class="french">This is a nested quote inside the quote. It gets single French quotation marks.</q> Lorem Ipsum. </q>
  </p>
  <p>
    You should make sure you <q>don't use the <code><q></code> element unless you're quoting someone. In all other cases (irony, sarcasm, or whatever else you use quotes for) simply use the quotation marks themselves (like these: “ ”).</q>
  </p>
  <p>
    Oscar Wilde says:
  </p>
  <blockquote>
    Always forgive your enemies; nothing annoys them so much.
  </blockquote>
</div>
@import url(http://fonts.googleapis.com/css?family=Gentium+Book+Basic:400,700,700italic,400italic);
/* general irrelevant styles */

body {
  color: #555;
  font-size: 1.5em;
  font-family: 'Gentium Book Basic', serif;
}

hr {
  margin: 50px 0;
}

a {
  color: #0099CC;
}

.container {
  margin: 50px auto;
  max-width: 700px;
}

.element {
  padding: 20px;
}
/* demo styles */

q,
blockquote {
  quotes: "“" "”" "‘" "’";
  font-style: italic;
}

.french {
  quotes: "«" "»" "‹" "›";
}

q:before,
blockquote:before {
  content: open-quote;
}

q:after,
blockquote:after {
  content: close-quote;
}

q:before,
q:after,
blockquote:before,
blockquote:after {
  color: deepPink;
  font-size: 1.2em;
}

blockquote {
  margin-left: 0;
  padding-left: 1em;
  border-left: 5px solid deepPink;
}