Web Inovadora

20 dicas CSS para Principiantes (Parte 1)

Se você está interessado em aderir ao CSS para criar o seu próprio tema de wordpress, ou simplesmente ajustar um pouco o seu blog, é sempre bom começar pelos aspectos mais importantes. Vamos dar uma olhada em algumas dicas de CSS em que acho que poderiam ser úteis para iniciantes.

1. Use o ficheiro Reset.css

Quando se trata da apresentação de estilos CSS para navegadores como Firefox ou Internet Explorer existe uma pequena tendência de lidarem com este assunto de maneiras diferentes. Com o reset.css eliminas todos os estilos fundamentais, e assim podes começar de inicio com um estilo completamente em branco.

Aqui ficam alguns exemplos de reset.css a serem utilizados em outros websites.  Yahoo Reset CSS, Eric Meyer’s CSS Reset, Tripoli

2. Use Shorthand CSS “Codigo Curto”

Shorthand CSS dá-lhe o caminho mais curto de escrever os seus códigos de CSS, e o mais importante é que ele torna o seu código organizado e fácil de entender.

Em vez de criar o CSS assim:
{code type=codetype}
1.   .header {
2. background-color: #fff;
3. background-image: url(image.gif);
4. background-repeat: no-repeat;
5. background-position: top left;
6. } {/code}

A versão mais curta seria:

{code type=codetype}1. .header {
2. background: #fff url(image.gif) no-repeat top left
3. } {/code}

3.Tente entender a diferença entre a “.Class” e o “#ID”

Estes são os dois aspectos em que por vezes confundem os iniciantes, Em CSS, a class é representada por um ponto “.” Enquanto o ID é um hash “#”. Basicamente a diferença é que o ID é um estilo que é único e apenas pode ser utilizado uma vez em cada página, enquanto o Class pode ser reutilizado.

4. Esqueça a <table>, utilize <div>

Uma das maiores vantagens do CSS é o uso de <div> para conseguir total flexibilidade em termos de estilo. Apesar de ambos servirem para o mesmo, “bloquear conteúdos dentro de uma determinada célula”. É seguro dizer que certos layouts não são realizáveis utilizado a unidade <table> o que é meramente desagradável.

5. Usar ferramentas de CSS Debugging

É sempre bom ter uma visualização imediata do layout, enquanto implementa o código, isso ajuda-o a compreender e entender melhor o estilo CSS. Aqui estão algumas ferramentas gratuitas de debugging CSS que pode instalar em seu navegador. FireFox Web Developer, DOM Inspector, Internet Explorer Developer Toolbar, and Firebug

6.  Substitua texto por imagem

Isto é uma prática comum para substituir o <h1> título </ h1> por uma imagem.
{code type=codetype}1.  h1 {
2.  text-indent:-9999px;
3.  background:url(“title.jpg”) no-repeat;
4.  width:100px;
5.  height:50px;
}{/code}

Explicação: o text-indent:-9999px; lança o seu título em texto para fora da ecrã , e passa a ter uma imagem declarada  pelo background: {…} com uma largura e altura fixa .

7. Editores de CSS gratuitos.

Era fácil aconselhar o Adobe Dreamweaver para editar os seus ficheiros css, mas esta ferramenta não é barata, e nem todos a podem pagar, e para evitar que use o seu bloco de notas, forneço-lhe alguns editores dedicados que são completamente gratuitos.
Simple CSS, Notepad ++, A Style CSS Editor

Fique atento! Brevemente iremos postar mais dicas na (Parte 2) deste artigo.