Menu Horizontal com CSS e HTML

Imagem: Love From Ginger

Olá, gente! Decidi finalmente trazer um post sobre CSS & HTML, que é um assunto que eu gosto muito e considero um dos meus hobbies. Agora, vamos aprender como fazer um menu simples e bonito com códigos bem simples.

Coloque o código a seguir onde você quiser que o menu apareça:

<div class='menu'>
<a href='ENDEREÇO DO LINK'>NOME DO LINK</a>
<a href='ENDEREÇO DO LINK'>NOME DO LINK</a>
<a href='ENDEREÇO DO LINK'>NOME DO LINK</a>
<a href='ENDEREÇO DO LINK'>NOME DO LINK</a>
</div>

 Caso você queira mais links no menu, é só repetir <a href='ENDEREÇO DO LINK'>NOME DO LINK</a> quantas vezes quiser.

Agora, coloque esse link no seu arquivo CSS ou entre as tags de estilo (<style> e </style>):

.menu {
text-align: center;
padding: 15px;
font-family: 'Calibri';
font-size: 16px;
text-transform: uppercase;
letter-spacing: 1px;
}
.menu a {
color: #faf6ed;
padding: 10px;
}

Entendendo o código:

a.  Text-Align: alinhamento do menu.
b. Padding: espaço entre os links.
c. Font-Family e Font-Size: fonte e tamanho da mesma.
d. Text-Transform: define se as letras são todas maiúsculas (uppercase) ou minúsculas (lowercase).
e. Letter-Spacing: espaçamento entre as letras.

É super fácil de se fazer, e com um pouco de prática você consegue fazer sem código algum. Qualquer dúvida, deixe nos comentários!