Daniel Nascimento

body { /* Seleciona o corpo da página */
    color: white; /* Usa a cor branca para todo o texto encontrado no corpo da página */
    background: black url(bgbar.jpg) repeat-x; /* O fundo do corpo da página será preto, com a imagem encontrada na url “bgbar.jpg” sendo repetida sobre o eixo X (Horizontalmente) */
}

#conteudo { /* Seleciona qualquer elemento que possua o id “conteudo”, para selecionar o ID usamos # enquanto para selecionar classe usamos . (ponto) */
width: 865px; /* Nossa largura deve ser sempre 865px, isso não irá mudar */
min-height: 445px; /* Nossa altura poderá ser maior que 445px, mas nunca deverá ser menor, ou a imagem será apresentada de forma incorreta. Para isso usamos a altura-minima (min-height) ao invés do atributo height. */
margin: 0 auto; /* Nós não queremos nenhuma margem vertical, mas queremos que horizontalmente o nosso conteúdo seja centralizado. Então usaremos a margem horizontal automatica. (Primeiro valor é o valor vertical, o segundo o horizontal, poderiamos também definir valores para cada um dos quatro lados usando 4 valores ao invés de 2) */
background: url(bgcenter.jpg) no-repeat; /* Queremos usar a imagem bgcenter.jpg sem nenhuma repetição como fundo da nossa DIV */
}

.barrasuperior, .barrasuperior a { /* Selecionar objetos de classe “barrasuperior” e também os links que se encontrem sobre este mesmo objeto */
text-align: right; /* Alinhar texto a direita */
padding: 8px; /* Adicionar margem interna de 8 pixels para todos os lados */
font-size: 0.8em; /* Usar tamanho de fonte equivalente a 0.8 do tamanho de fonte usado atualmente */
margin-right: 70px; /* Dar uma margem de 70px para a direita, para alinhar corretamente com a barra de pesquisa */
}

#cabecalho { /* Selecionar objeto de id “cabecalho” (Note que se trata de um ID, e não de uma classe, por isso uso o # ao invés do . que usei nos outros seletores) */
height: 170px; /* A Altura deverá sempre ser de 170px */
}

.pesquisa { /* Selecionar classe pesquisa */
margin-top: 17px; /* Dar 17px de margem acima (Para distanciar-se dos links da barra superior) */
margin-left: 685px; /* 685px de margem para a esquerda, para posicionar-se acima da imagem de pesquisa */
}

.galeria { /* Selecionar classe galeria */
float: right; /* Flutuar a direita */
height: 130px; /* Altura de 130px */
width: 155px; /* Largura de 155px, definindo altura e largura estamos definindo o formato exato da div, formando uma “caixinha” */
margin: 10px 69px; /* 10px de margem vertical, e 69 pixels de margem horizontal, para que as linhas de dentro da imagem combinem com as linhas da imagem de forma */
background: url(gal.jpg) no-repeat; /* Por ultimo, a imagem da respectiva div, posicionada sem repetição */
}

.barralateral { /* Selecionar classe barralateral */
float: left; /* Fazer com que o objeto flutue a esquerda */
padding: 20px; /* Margem interior de 20px */
}

.quadroprincipal { /* Selecionar classe quadroprincipal */
width: 540px; /* A largura real da imagem é de 580px. Mas eu quero usar um padding de 20px a esquerda e a direita, então retirando-os do tamanho real da div, me sobram 540px. */
min-height: 243px; /* Pelo mesmo motivo (Padding de 20px), posso retirar 40px da altura minima da imagem de fundo, que é de 283px. Novamente, usando uma altura minima posso ter texto pequeno, ou texto grande, e a imagem continuará sendo exibida corretamente. */
float: right; /* Flutuar a direita, diferente da barra lateral que flutuava a esquerda */
margin-right: 65px; /* Adicionar margem a direita de 65px, para poder alinhar a falsa transparência a imagem de trás */
background: url(content.jpg) no-repeat; /* Usar a imagem content.jpg como fundo, sem repetição */
padding:20px; /* Margem interna de 20px para cada lado */
}

.quadroprincipal h1 { /* Selecionar tudo que possuir atributo h1 dentro do objeto de classe quadroprincipal */
margin-bottom: 10px; /* Dar 10px de margem inferior para não ter o meu titulo colado ao texto em si */
font-size: 1.5em; /* Tamanho da fonte será 1 vez e meia o tamanho da fonte usado atualmente. */
}

.rodape, .rodape a { /* Selecionar objetos de classe rodape e links sobre o objeto rodapé */
clear: both; /* Diz que a partir daqui, não serão permitidos objetos flutuantes, ou seja, limita os objetos float, se posicionando após os mesmos. */
text-align: center; /* Alinha o texto ao centro */
font-size: 0.7em; /* Tamanho da fonte será 0.7 do tamanho atual da fonte utilizada. */
}

 <!-- linkando o meu CSS -->
<div id="conteudo">
<div class="barrasuperior">
		Aqui entram os links da barra superior</div>
<div id="cabecalho">
<div class="pesquisa">
			Pesquisa</div>
<div class="galeria">
			Galeria de Imagens</div>
</div>
<div class="barralateral">
		Aqui entrará a barra lateral</div>
<div class="quadroprincipal">
<h1>Titulo da página</h1>
Conteúdo da página</div>
<div class="rodape">
		Criado por blablabla</div>
</div>