Оформление участка текста стилем "Тетрадный лист в линейку"

Сначала добавляем новый класс CSS ("quote") через:
Дизайн → Дизайнер шаблонов → Дополнительно → Добавить CSS

/* Стиль оформления текста Лист в линейку */
.quote {
  background: linear-gradient(90deg,
      rgba(255, 255, 255, 0) 1.8em, rgba(34, 136, 187, .5) 2em)
      3em 0 repeat-y,
    linear-gradient(
      rgba(255,255,255, 0) 1.9em, rgba(0, 0, 0, .15) 2em)
    0 0;
  background-size: 2em 2em;
  background-color: #f2f9fc;
  margin: 1em 0em 1em 0em;
  padding: 2.5em 2em 1em 6em;
  font: 16px/2 Georgia;
  font-style:italic;
}
/* END Стиль оформления текста Лист в линейку */

Сохраняем.

После чего участок текста, который будем выделять, заключаем в конструкцию вида:

<div class="quote">
УЧАСТОК ТЕКСТА
</div>

Пример оформленного таким способом текста:

В компьютере предусмотрена функция Awaseru Voice. Она усиливает высокие частоты, которые хуже слышат люди в возрасте. Функция Awaseru View, в свою очередь, подбирает оптимальные яркость и цветовой баланс экрана.

Можно поэкспериментировать с цветами:
rgba(34, 136, 187, .5) - цвет вертикальной полоски слева
#f2f9fc  - цвет фона

По материалам статьи "CSS-паттерны"

Про оформление цитаты и кода:

• Вставка кода в статью блога  
• Вставка кода в статью блога (продолжение)   
• Ещё один вариант оформления кода    
• Текст с прокруткой  
• Оформление цитаты