10 dicas para os iniciantes em CSS Valdemir Vinagre Mendes

Baseado no design do meu site, resolvi fazer esse tutorial para ser uma proposta para aqueles que esto construindo seu site com CSS. Sabendo que nada neste mundo absoluto, no tenha essas idias como nicas, ou pelo menos completas.

1- Definir a localizao dos containeres: pode ser feita desenhando no papel os quadrados que sua pgina vai conter. No exemplo abaixo eu fiz no PowerPoint. Ex:

2- Definir as cores dos contineres com seus diversos elementos: textos, imagens, vdeos, etc. Voc pode escrever num papel o contedo de cada continer, ou at mesmo em um projeto de site, caso voc queira fazendo um projeto para uma melhor visualizao de seu site em processo de construo. 3- Definir 3 ids principais: topo, corpo e base. No exemplo abaixo eu pequei a mesma diviso anterior e definir os ids.

3
1

4- Definir dentro de cada id o nome das divs (classes) que constituiro os contineres. Dessa forma se eu tenho o id topo eu poderia criar uma div menu para inserir o meu cdigo de menu. Sempre dessa forma: id classes. Ex: #topo{ Caractersticas } #topo div.menu{ Caractersticas } #topo div.menu h1{ Caractersticas } #topo div.menu a{ Caractersticas } 5- Outra forma mais ampla de usar as classes definir uma classe dentro de um id para por outra classe, por exemplo; #corpo{ Caractersticas } #topo div.meio{ Caractersticas } /*------ As classes abaixo so colocadas dentro da div meio --------- */ .logo{ Caractersticas } .logo p.texto{ Caractersticas } .logo p.texto a{ Caractersticas } .logo p.texto2{ Caractersticas } .logo p.texto2 a{ Caractersticas } 6- Dicas sobre propriedades (o que para muitos bastante obvio): background use o background-position para posicionar a sua imagem dentro de sua div;
2

use o background-repeat para criar algum efeito dentro de sua div, como varias imagens pequenas se repetindo. width e height use as definies de tamanho de sua div sempre pensando na soma para calcular o design de sua pgina. margin e padding use esses recursos sempre de uma maneira padronizada, com valores constantes, para no deixar um visual irregular. float use com valores sempre left e no final right, como o caso de trs blocos alinhados um ao lado do outro, os dois primeiros so left e o ultimo right. color , border, text-decoration e list-style use para dinamizar os links dentro de um menu, que claro, esta dentro de uma lista html. text-align: justify use para deixar os seus textos justificados. font-weight e color use para marcar palavras dentro de um pargrafo. background-attachment:fixed use para deixar uma imagem sempre visvel em sua pgina, dessa maneira para onde o usurio rolar a pgina ver a imagem. overflow:scroll use para criar uma rea com a aparncia de um frame em sua pgina, dessa maneira o usurio v um lugar com tamanho especfico mas com um contedo maior. position:absolute use para colocar um elemento em uma posio especifica dentro da pagina, podendo ainda ter outros elementos por cima dele para incrementar.

7- As tags podem ser seguidas nesta seqncia:

div

span

h1-6

div p span h1-6

8- Lembre que uma imagem um fundo de uma div, caso a div tenha um tamanho menor que o tamanho da imagem, no ser visvel o tamanho total dessa imagem. Dessa maneira tente colocar as imagens, como o logo de sua pgina por exemplo, como fundo de contineres maiores, como aqueles que abrangem a largura total da pgina. Dessa forma pode-se at criar um efeito legal pondo um background de uma paisagem, enquanto as divs formam contineres que se sobrepem a essa paisagem com outros backgrounds. Lembrando sempre, claro, do peso dessas imagens. 9- Costume sempre por comentrios em seus cdigos para no bagunar e depois ficar chorando (hehehe). 10- Por fim, para que sua pagina tenha sempre tenha uma boa renderizao, sempre teste em vrios browsers e valide os seus cdigos no site da W3C, a padronizao a principal dica, sem complicaes e com bastante eficincia.