CSS no Lanche

Nesse tutorial você irá aprender a mostrar quotes, ou seja, aquelas aspas em blocos de citação utilizando a tag blockquote e um simples truque de css. Vamos ao nosso HTML:

	<blockquote>Lorem Ipsum is simply dummy text of the printing...</blockquote>

Agora vamos dar algum estilo a esse blockquote:

blockquote {
  font: 1.2em/1.6em Georgia, "Times New Roman", Times, serif;
  width: 400px;
  background: url(close-quote.gif) no-repeat right bottom;
  padding-left: 18px;
  text-indent: -18px;
}

No CSS definimos para que a nossa imagem close-quote.gif, independente do conteúdo, fique sempre alinhada a direita e abaixo no bloquote. Padding-left:18px e Text-indent:-18px foram utilizados para deixar espaço para que as imagens de quote apareçam e o texto não interfira. Agora para que possamos colocar a imagem de abertura do quote, vamos utilizar o pseudo-elemento :first-letter, onde iremos aplicar estilos a primeira letra de nosso texto:

blockquote:first-letter {
  background: url(open-quote.gif) no-repeat left top;
  padding-left: 18px;
  font: italic 1.4em Georgia, "Times New Roman", Times, serif;
}

Vejam agora o nosso exemplo em funcionamento.