Dicas de CSS para iniciantes

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, que você pode importar para o seu estilo principal. Veja um exemplo abaixo:

[code language=”css”]
/* 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;
}
[/code]

Trabalhar com folhas de estilo

Se você acompanha meu 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:

[code language=”css”]
.borda{
border-style: dashed;
border-color: #000000;
border-width: 20px;
}
[/code]

Trabalhe assim:

[code language=”css”]
.borda{
border: 20px dashed #000000;}
[/code]

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 e elementos semânticamente corretos! 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 aplicá-lo através de elemento com um id especifico 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!

[code language=”css”]
.exemplo{
/* chamada de classe */
}

#exemplo{
/* chamada de ID */
}

exemplo{
/* chamada de elemento – como H1, p, entre outros */
}
[/code]

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.

[code language=”css”]
.exemplo p{
/* define estilo dos ‘p’ que pertencem à exemplo */
}
[/code]

Postado originalmente em Eu Faco Programas

3 Comentários