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:

Clique para aumentar

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á.