Dicas de CSS para iniciantes

Se você é um desenvolvedor em início de carreira pode ser complicado lidar com CSS em suas primeiras aplicações web.

Confira a seguir uma lista de dicas básicas de CSS para iniciantes – e boas linhas de código!

via GIPHY

 Resetar o CSS

Cada navegador tem pré-definifo alguns atributos, como margins, borders, paddings, entre outros. Para evitar conflitos com a sua folha de estilos, trabalhe sempre com um Css Reset, que é uma classe especial que fará a função de “limpar a casa”. Na web você encontrará várias classes por aí, que você pode importar para o seu estilo principal. Veja um exemplo abaixo:

/* CSS reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
html,body {
margin:0;
padding:0;
height:100%;
}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset,img {
border:0;
}
input{
border:1px solid #b0b0b0;
padding:3px 5px 4px;
color:#979797;
width:190px;
}
address,caption,cite,code,dfn,th,var {
font-style:normal;
font-weight:normal;
}
ol,ul {
list-style:none;
}
caption,th {
text-align:left;
}
h1,h2,h3,h4,h5,h6 {
font-size:100%;
font-weight:normal;
}
q:before,q:after {
content:'';
}
abbr,acronym { border:0;
}

 

Trabalhar com folhas de estilo

Se você acompanha o blog, nos tutoriais de CSS costumo escrever o estilo na própria página, para ficar mais fácil e didático. Contudo, se você está trabalhando em um projeto real, por menor e mais simples que seja, trabalhe sempre com links para suas folhas de estilo! Separar código, estilo e scripts é uma recomendação da W3C e uma maneira de deixar suas páginas mais legíveis e facilitar a manutenção, além do reaproveitamento do código. Para “chamar” um arquivo CSS em suas páginas, entre as tags <head></head> coloque um link para o arquivo CSS, indicando seu caminho:

<link href=”css/modal-window.css” rel=”stylesheet” type=”text/css”>

Escreva o mais resumidamente possível

Com certeza você já deve ter ouvido por aí que, quanto menos linhas de código, melhor. Então, ao invés de escrever assim:

.borda{
border-style: dashed;
border-color: #000000;
border-width: 20px;}

Trabalhe assim:

.borda{
border: 20px dashed #000000;}

 

Trabalhe com divs ao invés de tables

A não ser que seu dados sejam realmente tabeláveis, não utilize tables! Para a construção de templates e posicionamento de elemento trabalhe sempre com Divs! Se você tem alguma dúvida, consulte o artigo sobre posicionamento de Divs.

 

Entenda a diferença de ids e classes

Ao definir um estilo, podemos aplica-lo através de elemento com um id especificado ou através da utilização de uma classe. Se um tipo de estilo será aplicado somente a um elemento, prefira trabalhar com ids – e não se esqueça de, no documento HTML, nomear corretamente <elemento id=”id_elemento”>. Classes são utilizadas para serem reaproveitadas!

.exemplo{
/* chamada de classe */}

#exemplo{
/* chamada de ID */}

exemplo{
/* chamada de elemento - como H1, p, entre outros */}

 

Trabalhe com subníveis

Ao definir uma classe ou Id, trabalhe com subníveis daquele estilo. Por exemplo, se você definiu um estilo para um div e quer os seus parágrafos tenham um comportamento diferente, lance mão dos subníveis.

.exemplo p{
/* define estilo dos 'p' que pertencem à exemplo */}

dicas de css para iniciantes

// Comente!

comentários

Olá, eu sou a Gabi e eu criei o "Eu Faço Programas" em 2011, quando ainda trabalhava em desenvolvimento web. Atualmente meu trabalho é focado em estratégia digital e redes sociais. Quer saber mais? www.imgabi.com

// 1 Comentário

  • Responder abril 15, 2014

    Simone Silva

    Otimo trabalho, isto mostra cada dia mais que nos mulheres estamos dominando a informatica

// Siga as boas práticas: Comente!