CSS no Lanche

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.