Tutorial de CSS > Criando um layout com CSS a partir do zero > Parte 4
4. Configurando a tela
Como você vai notar no design, qualquer coisa em nossa página é da largura de 760px ou menos, e nada flutua fora disso. O que nós vamos fazer é criar um contêiner para nossa página que tenha 760px de largura e posicionado no meio da página. Nossos 5 principais elementos serão colocados dentro desse contêiner.
Entre as tags <body> </body>
, crie um <div>
com um atributo id="page-container"
:
<body> <div id="page-container"> Hello world. </div> </body>
E isto é todo o HTML que precisamos para nosso contêiner. Vamos às CSS.
Crie um novo arquivo vazio e salve-o como master.css
no diretório /css/
.
Crie uma nova regra na folha-de-estilos para selecionar o atributo page-container
:
#page-container { }
O sinal # (sustenido ou hashtag, para a geração Twitter) na frente da id
diz ao navegador
que estamos selecionando uma id
. Para uma classe, nós usaríamos um .
(isso mesmo, um sinal de ponto final). Exemplo: .page-container {}
— no caso de uma classe.
Um id
é um identificador único que usamos para coisas que somente ocorrerão uma vez na página.
Então para cabeçalhos, rodapés, navegadores, etc..., nós usamos id's e para elementos que se repetem, como links, nós devemos
usar classes, que podem aparecer mais vezes na mesma página.
Nós não estaremos habilitados a ver as modificações que são feitas a esta <div>
, porque ela
é transparente por padrão. Então, a primeira coisa que nós vamos fazer é colorir o fundo da div
de
vermelho, para nos dar um indicador do que estamos fazendo:
#page-container { background: red; }
Você deve ver algo como isto através do comprimento da página do seu navegador:
Em primeiro lugar devemos atribuir uma largura de 760px para esta div
.
#page-container { width: 760px; background: red; }
Recarregue a página no seu navegador para ver a regra sendo aplicada.
No próximo passo vamos centralizar esta div
. Isto é feito atribuindo suas margens para
auto
. Quando as margens esquerda e direita são atribuídas para auto
, elas
se igualam em ambos os lados e a div
fica no centro do contêiner.
#page-container { width: 760px; margin: auto; background: red; }
Agora você deve ter um bloco vermelho de 760px de largura, centralizado e com os dizeres "Hello World.". Mas ele está situado a 8px de distância do topo e lados do navegador.
Isto acontece porque as tags html
e body
tem margens e/ou alinhamento
padrão em quase todos os navegadores. Então nós precisamos escrever uma regra CSS para redefinir as margens e alinhamentos das
tags html
e body
para zero. Adicione essa regra bem no topo do seu
arquivo css:
html, body { margin: 0; padding: 0; }
Uma vírgula entre os seletores CSS significa "ou". Então, aqui a regra será aplicada à tag html
ou à tag body
. Já que ambas existem na página, será aplicada a ambas.
Maravilha, agora nosso bloco está do jeito que deveria estar. Note que quanto mais conteúdo é adicionado à esta
div
, ela vai automaticamente modificar sua altura para acomodar o conteúdo que é colocado dentro.
Vamos lá.