Dicas de CSS para iniciantes – 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á?

1. 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
2. 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?
3. 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.
4. 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
5. 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

Bom pessoal, por hoje é só! Logo mais tratei a segunda parte desta lista, e quem sabe uma terceira! 😉

Espero que tenham gostado.

Siga-nos no Facebook e acompanhe todas as postagens do blog!