Цитата



Средняя сложность

С помощью стилей оформите страницу, как показано на рис. 1. Размер и положение кавычек можно установить по своему желанию.

Цитата в кавычках

Рис. 1. Цитата в кавычках

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Цитата</title>
  <style>
   blockquote:before, blockquote:after {
    font-size: 3em;
    color: #800;
   } 
   blockquote:before {
    content: '«';
    float: left;
    margin-top: -0.4em;
   }
   blockquote:after {
    content: '»';
    float: right;
    margin-top: -1.2em;
   }
   blockquote p { margin: 1em 3em; }
  </style>
 </head>
 <body>
  <blockquote>
   <p>Не ошибается лишь тот, кто ничего не делает! 
   Не бойтесь ошибаться&nbsp;— бойтесь повторять ошибки.</p>
   <p>Теодор Рузвельт</p>
  </blockquote>
 </body>
</html>

Статьи по теме

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.