Dicas de CSS para inciantes - Parte 1

Nos dias atuais, mesmo com tantas ferramentas como Html5 CSS3 e outras ferramentas que nos ajudam a desenvolver para Web, sempre tem alguém iniciando no mundo da programação, seja por hobby ou por crescimento profissional. Aqui no blog temos como base um único sentido : Distribuir conhecimento, mesmo que pouco a todos de forma SIMPLES.

Levando a esse lado, vou levantar algumas dicas de Css para quem está começando ou até mesmo para quem já sabe e talvez sirva de ajuda na hora de desenvolver seu html e Css. Para isto pretendo dividir o artigo em partes que vai facilitar ainda mais a vida de quem está aprendendo.

Vamos lá?

css

Use reset.css
Quando se trata de renderização de estilos CSS, navegadores como o Firefox e o Internet Explorer ( ~~Bendito seja~~ ) têm maneiras diferentes de lidar com eles. Cada motor de renderização de navegador trata o Css de uma maneira como padrão.Por exemplo: Um parágrafo <p></p> tem uma margem diferente por padrão para o mozilla e para o IE, ou seja, caso você não declarar nada anteriormente o seu site inteiro poderá ficar desigual justamente por isto.Utilizando reset.css você redefine estilos todos fundamentais, de modo que você começa com o mesmo padrão de Css para todos os navegadores. Para aprender a utilizar reset basta acessar este link do nosso Blog que fala justamente sobre isto : Reset CSS

Use Taquigrafia CSS
A Taquigrafia CSS permite um modo mais curto de escrever seus códigos CSS, e o mais importante de tudo- você deixa o seu código mais fácil de entender.Veja um exemplo :

  
  /* Antes */
  .header {
          background-color: #fff; 
          background-image: url(imagem.gif);  
          background-repeat: no-repeat;
          background-position: top left; 
        }  
   /* Depois */
            .header {  
          background: #fff url(imagem.gif) no-repeat top left;  
        }

Viu só a diferença?

Compreender classe e ID
Estes dois seletores muitas vezes confundem os iniciantes. Em CSS, classe é representado por um ponto “.” enquanto ID é um hash “#”. Resumidamente ID é usado em estilo que é único de uma tag html e não se repete no documento, já a classe por outro lado, pode ser reutilizada sempre que necessária.
Conhecendo o atributo !important
Qualquer estilo marcado com !importante será levado em uso independentemente se há uma regra de substituição abaixo do atributo Css utilizado. Para aprender mais sobre a utilização de !important veja esse artigo aqui no Blog : !important css
Tabela de compatibilidade de CSS entre Navegadores
Todos nós sabemos que cada navegador tem diferentes formas de renderização de estilos CSS. É bom ter uma referência, um gráfico ou uma lista que mostra toda a compatibilidade CSS para cada browser. Para acessá-la veja por este link