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.