Contente

• Instruções
• Seu Site
• banner{}
• banner{margin: 0 auto;}
• banner{margin: 0 auto
• O que você precisa

Fazer um banner é uma parte fundamental do webdesign. Muitos designers iniciantes usam tabelas para criar o banner e o leiaute do site. No entanto, usando CSS, você pode definir o fundo, as cores, o tamanho e as bordas do banner. As tabelas dificultam a gestão do design com o tempo, enquanto o CSS permite alterar os elementos conforme necessário. É necessário um conhecimento básico de HTML para executar este pequeno tutorial. Embora haja muitas maneiras de criar um banner com CSS, neste tutorial vamos criar um banner centralizado de dois tons, com texto alinhado à direita.

Instruções

Necessário conhecimento básico de HTML para execução deste tutorial (internetseite image by FX Berlin from Fotolia.com)

1. Abra o arquivo HTML. Após a etiqueta BODY, acrescente a DIV, seguida da ID. Nomeie a etiqueta como "banner":

2. Digite o texto do banner entre as etiquetas DIV que acabou de criar:

   Seu Site

   Feche com a etiqueta H1:

   Seu Site

   Isso fará com que seu texto seja maior que o tamanho padrão em mais de quatro pontos.

3. Abra seu arquivo CSS. Configure o estilo do banner digitando:

   banner{}

   A etiqueta "#banner" vai indicar aos navegadores que procuram o estilo da "id="banner"" -- por isso a etiqueta é chamada "banner".

4. Entre as {}, você vai precisar digitar os estilos. Existem muitos estilos em CSS. Nós só vamos usar alguns deles. Primeiro, queremos centralizar o banner na página:

   
   

   banner{margin: 0 auto;}

   Assim, centraliza-se o banner no site, com margem automática de zero ponto em relação às partes superior e inferior da linha.

5. Adicione os outros estilos:

   banner{margin: 0 auto

   Width: 780px Height: 300px Border:#ff0000 solid 10px Background: #ffffff Color: #ff0000 Font-size: 18px Text-align: right Padding-right: 10px;}

   A largura e a altura definem o tamanho do banner. A borda é uma linha sólida de 10 pixel ao redor da caixa. Ela será vermelha, tal como definido pelo código hexadecimal, isto é, pelos seis números e letras que seguem o símbolo "#". "Background" (fundo) é definido como branco. A etiqueta "Color" define a cor do texto, que é novamente vermelho, para coincidir com a borda. A etiqueta "font-size" define o tamanho do texto. "Text-align" define o posicionamento do texto -- neste caso, optou-se pelo alinhamento à direita da caixa. "Padding" cria um espaço entre o conteúdo, como o texto, dentro da caixa e a borda. "Padding-right" está ajustado para dar 10 pixel de espaço entre o texto e a borda direita.

   
   

6. Salve os arquivos.

O que você precisa

• Editor de texto
• Site
• Selecionador de cor