Tutorial para codificação de layouts e encomendas

CSS

Nós vimos como "configurar" o seu HTML,agora nós vamos dar um estilo a ele,vamos deixa-lo mais ~~colorido~~ bonito,para isso é nescessário mexer no CSS. como regra você deve aprender: toda classe de CSS deve iniciar comnome » abre-cháve"}" » atributo » *contéudo do atributo » Ponto-e-vírgula ";"» fecha chaves"}" »
exemplo:

.titulo { border-top:1px dashed #9ECB87;
border-bottom:3px double #FFD173;
font-weight: bold;text-align:center;
background-color:#FEF3FA;
}
quando terminar um atributo(border,font...)você precisa colocar o ponto-e-virgula no final

Esses são os diversos atributos usados no CSS:

color - cor do texto » exemplo: #000000
font-family - tipo da fonte » exemplo: arial, tahoma, etc…
font-size - tamanho da fonte » exemplo: 10px, 12px, etc…
font-style - estilo da fonte » exemplo: italic, oblique, normal
font-weight - largura da fonte » exemplo: bold

line-height - altura da linha » exemplo:12px, 15px, etc…
text-align - alinhamento do texto » exemplo:center (centro), left (esquerda), right (direita) e justify (justificar)
text-decoration - decoração do texto » exemplo: none (nenhuma), underline (sublinhado) overline (sobrelinhado) e line-through (tachado)
text-transform - forma do texto » exemplo: capitalize (primeira letra maiúscula), uppercase (todas as letras maiúsculas) e lowercase (todas as letras minúsculas)
text-indent - recuo do texto » exemplo: 10px, 12px, etc…
letter-spacing - espaço entre as letras » exemplo: 2px, 3px, etc..
word-spacing - espaço entre as palavras » exemplo: 2px, 3px, etc..

background-color - cor do fundo » exemplo: #FFFFFF
background-image - imagem de fundo » exemplo: url (http://www.endereço.com/fundo.gif)
background-positon - posição do background » exemplo: left, right, center, top, bottom, etc…
background-repeat - repetir background
background-no-repeat - não repetir background
background-repeat-x - repetir background na horizontal
background-repeat-y - repetir background na vertical

margin - tamanho das 4 margens » exemplo: 5px, 10px, etc…
margin-left - margem à esquerda » exemplo: 5px, 10px, etc…
margin-right - margem à direita » exemplo: 5px, 10px, etc…
margin-top - margem em cima » exemplo: 5px, 10px, etc…
margin-bottom - margem em baixo » exemplo: 5px, 10px, etc…

padding distância entre as 4 bordas e o texto » exemplo: 3px, 5px, etc… padding-left - distância entre a borda e o texto à esquerda » exemplo: 3px, 5px, etc…
padding-rigth - distância entre a borda e o texto à direita » exemplo: 3px, 5px, etc…
padding-top - distância entre a borda e o texto acima » exemplo: 3px, 5px, etc…
padding-bottom - distância entre a borda e o texto abaixo » exemplo: 3px, 5px, etc…

border-color - cor da borda » exemplo: #000000 border-style - estilo da borda » exemplo: none (nenhuma), dotted (pontilhado), solid (sólida), double (dupla), etc…
border-width - tamanho da borda » exemplo: 1px, 2px etc… ou 90%, 100%, etc…

float - alinha o elemento, fazendo com o que o texto fique ao redor dele » exemplo:left e right

width - define largura » exemplo: 10px, 20px, etc… ou 90%, 100%, etc…
heigth - define altura » exemplo: 10px, 20px, etc… ou 90%, 100%, etc…

vertical-align - alinhamendo vertical - » exemplo: middle (no meio), bottom ( abaixo), top (acima)

Vamos ver agora como fika essa coisa no CSS??

obs:redimendionada arraste-a até a barra de endereço para visualizar em tamanho normal =D
está tudo explicado na imagem mesmo.
Vou te passar um CSS ± pronto, então você precisa arrumar as coisas,como tamanho das divs, o numero de divs... e as cores das fontes e enfeites... CSS

<STYLE type="text/css">
/* ------------------------------- Fonte ---------------------------------- */
 body, td, tr, div {
 font-style: normal;
 font-weight: normal;
 font-size: 11px;
 color: #FF87AF;
 font-family: arial;
 line-height: 12px;}

/* ------------------------------- Barra de Rolagem ---------------------------------- */

BODY {
scrollbar-face-color: #fdcad0;
scrollbar-highlight-color: #ffffff;
scrollbar-3dlight-color: #fe808d;
scrollbar-darkshadow-color: #fe808d;
scrollbar-shadow-color: #ffffff;
scrollbar-arrow-color: #fdcad0;
scrollbar-track-color:#3fce7e9;
}

/* ------------------------------- Os Links ---------------------------------- */

a, a:link{
color: #e97e59; height:0px; 
cursor: help
}

a:hover {
color: #e97e59;
border-bottom: 1px dashed #ff909e;
border-top: 1px dashed #ff909e; 
 
}

/* ------------------------------- Negrito, Sublinhado, Italico e etc ---------------------------------- */

b {font-weight: bold;color: #B885FE;}

u {  color: #ff909e; TEXT-DECORATION: none; border-bottom: 1px 
dashed #acacac;
}
i {  color: #9ABBFF; TEXT-DECORATION: none;
}

p { color: #ff909e; TEXT-DECORATION: none; border-bottom: 1px 
dashed #acacac;font-weight: bold; }

ul {line-height: 100%; color: #ff909e; font-color:e97e59; margin: 0 18;
}

/* ------------------------------- Titulo ---------------------------------- */

.titulo {
    border-top:1px dashed #9ECB87; 
    border-bottom:3px double #FFD173;
    font-weight: bold;text-align:center;
    background-color:#FEF3FA;
}

/* ------------------------------- Caixas ---------------------------------- */

textarea {
	color: #89CEFF;
	font-family: arial;
	font-size: 10 px;
	border: 1px dashed #89CEFF;
	background-color: #ffffff;
                   width:173px
                   height:78px}

/* ------------------------------- Algo Mais e tutorial ---------------------------------- */
#Div1{
position:absolute;
left:64px;
top:580px;
width:422px;
overflow:none;
z-index:2;
padding:0px;
margin:0px;}

#Div2{
position:absolute;
left:564px;
top:565px;
width:180px;
overflow:none;
z-index:2;
padding:0px;
margin:0px;}

</style>

--------------------/* todas as cores estão ajeitadas para o lay da pagina onde você pegou o Tutorial---------------------*/