Estilizando nossa página com CSS 3 – Parte 2

Continuando a estilização da página HTML que criamos nos posts anteriores (clique aqui para abrir o artigo onde criamos o HTML desta página), vamos relembrar o layout que definimos em nossa página:

Vamos começar estilizando o menu superior, para que ele fique com o fundo cinza e com os textos lado a lado:

Criaremos inicialmente o css na própria página através da tag <style>, que adicionaremos dentro da tag <head> conforme a figura à seguir:

Colocaremos na tag <style> o código do CSS da nossa página, iniciando do cabeçalho. Futuramente, quando o CSS ficar bem maior, faremos a separação dele em um arquivo de estilos, mas para facilitar o entendimento, vamos fazer desta forma:

Aprendi que para facilitar a formatação, devemos começar resetando a configuração de margens, espaçamentos e bordas para todos os elementos da seguinte forma:

Com esta configuração você irá definir que todos os elementos da sua página possuam margem de 0px, espaçamento interno de 0px e com o box-sizing: border-box você informa que a largura do seu componente irá ser definida contando não só o tamanho interno, com a também o espaçamento interno e a espessura da borda, tanto na largura quanto na altura.

Mas o que isso significa?

Significa que se você definir uma <div> com width: 200px e height: 200px ela terá exatamente este tamanho, independente da largura da borda e do espaçamento interno (padding) que você definir.

Vamos criar uma div no nosso documento, definindo a classe teste para fazer o experimento.

Sabendo disso, se você definir um padding: 5px, sua área interna será de 190px de altura e 190px de largura, pois a soma do padding (espaçamento interno) deverá ser 200px;

Se além disso você colocar border: 1px solid red por exemplo, sua área interna será agora de 188px de altura e largura, pois também será incluída a espessura da borda para chegar no total de 200px;

Maravilha né?

Agora vamos excluir este teste que serviu apenas para exemplificar o nosso primeiro CSS aplicado à página.

Para não encerrar o artigo sem ter feito mais nada em nossa página, vamos estilizar da seguinte forma:

Fonte Principal: Arial, Tamanho 12pt;

Menu superior:

  • Fundo azul
  • Links:
    • Cor Branca
    • Link lado a lado
    • Sem sublinhado
    • Alinhado à direita
    • Margens superior e inferior de 8px
    • Margens esquerda e direita de 12px
    • Ao passar o mouse, ficar com fundo azul mais claro

Em CSS fica da seguinte forma:

Para a Fonte Principal, apliquei em todos os componentes:

Para as configurações do menu superior, fiz da seguinte forma:

header > nav { … }: Este trecho define que o fundo da tag <nav> que está dentro do <header> deverá ser azul. O sinal > significa que o <nav> deverá estar imediatamente dentro da tag <header>, ou seja, ser filha da tag <header>. Se tiver outro <nav> dentro de um <li> por exemplo, não será afetado por este CSS. Para garantir que apenas o menu superior aplique este estilo, você pode utilizar as classes (Ex: .teste, .menu, etc.) ou os ids dos elementos (#menu para <nav id=”menu”>).

header > nav > ul { … }: Este trecho de CSS serve para alinhar à direita todos os elementos da minha lista <ul> que está dentro de <nav>, que por sua vez está dentro do <header>.

header > nav > ul > li { … }: Aqui eu defini que o alinhamento dos itens da lista <li> deve ser alinhados lado a lado, em forma de blocos.

header > nav > ul > li > a { … }: Aqui eu faço a estilização dos links do menu com a cor da fonte branca (color: #fff), digo que os links serão mostrados como blocos (display: block) para que eu consiga definir o espaçamento interno entre os itens (padding: 8px 12px) e retiro o sublinhado (text-decoration: none);

header > nav > ul > li > a:hover { … }: Por último defino que ao passar o mouse por cima, a cor de fundo ficará azul mais clara

Finalizando a estilização, teremos o seguinte resultado em nossa página:

Vemos começamos a entender a importância da semântica e organização do nosso código, pois sem precisar criar classes ou adicionar Ids aos elementos, já conseguimos aplicar facilmente estilos de forma mais fácil, mais simples de entender e deixando nosso código limpo.

Bom, por hoje é isso e espero que tenham gostado. No próximo artigo iremos continuar a estilização da nossa página até atingir o resultado final esperado para nosso exemplo de estilização.

Caso queira um curso completo para se tornar um desenvolvedor Full Stack, com mais de 80 projetos práticos e mais de 1000 aulas gravadas e constantemente atualizadas, que inclusive tem um módulo específico que trata sobre o HTML5, basta clicar aqui e adquiri-lo por um excelente preço promocional, que estará disponível por pouco tempo. 

Abraços e até a próxima.

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *