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.

No site Font Tester você pode encontrar uma interessante lista com famílias de fontes “web safe”, ou seja, as fontes utilizadas em projetos web que são mais comuns entre os sistemas operacionais Windows, MAC e Linux:

font-family: Arial, Helvetica, sans-serif;
font-family: 'Arial Black', Gadget, sans-serif;
font-family: 'Bookman Old Style', serif;
font-family: 'Comic Sans MS', cursive;
font-family: Courier, monospace;
font-family: 'Courier New', Courier, monospace;
font-family: Garamond, serif;
font-family: Georgia, serif;
font-family: Impact, Charcoal, sans-serif;
font-family: 'Lucida Console', Monaco, monospace;
font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
font-family: 'MS Sans Serif', Geneva, sans-serif;
font-family: 'MS Serif', 'New York', sans-serif;
font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
font-family: Symbol, sans-serif;
font-family: Tahoma, Geneva, sans-serif;
font-family: 'Times New Roman', Times, serif;
font-family: 'Trebuchet MS', Helvetica, sans-serif;
font-family: Verdana, Geneva, sans-serif;
font-family: Webdings, sans-serif;
font-family: Wingdings, 'Zapf Dingbats', sans-serif;

Veja abaixo um preview de como essas famílias de fontes seriam renderizadas pelo browser:

Codificar CSS não é uma tarefa tão fácil assim como parece, mesmo os mais experientes passam por problemas, e algumas vezes, por falta de mera atenção. Utilizar declarações com letras maiúsculas em CSS é uma delas, não, não é errado você fazer isso, mas vou explicar o por que de sempre utilizar declarações em letras minúsculas.

Se lembram de quando utilizavamos o nosso querido HTML 4? Alí não importava se você codificava o código em maiúsculas ou em minúsculas, mas no XHTML, todas as declarações devem ser escritas em minúsculas, isso é regra. Aqueles que migraram do HTML para o XHTML por favor, não esqueçam isso.

Utilizar também declarações em letras minúsculas, é necessário, pois muitas vezes, não é somente você quem vai mexer no código de um site, e com isso também pode acontecer de seu companheiro de equipe, que está iniciando no mundo do Desenvolvimento Web ficar meio perdido por causa disso. Para aqueles que não sabem, CSS é case-sensitive, portanto, isso: Foo é diferente disso: foo.

Portanto, pense 2 vezes antes de ficar utilizando declarações com letras maiúsculas.

O seletor universal em CSS é representado pelo caractere *, os desenvolvedores que estão iniciando em CSS, e já também os mais experientes, costumam utilizar esse seletor para resetar as margens e paddings de todos os elementos da página, sua utilização seria semelhante a essa:

* {margin:0; padding:0}

Mas o que muitos não sabem é que a utilização desse seletor não se resume somente a isso, exemplo:

div#header * {font-size:2em}

A regra acima aplica um tamanho de fonte de 2em a todos os elementos que sejam filhos, netos e assim por diante que estejam dentro da div com o id header.

div#content > * {height:100px}

A regra acima aplica um tamanho de 100px a todos os elementos que seja filhos diretos da div com o id content.

Viram como podemos extender o uso do seletor uiversal (*), isso são pequenas coisas do que podemos fazer com CSS.