Um impasse que tive, assim como o colega Lucas teve (https://cursos.alura.com.br/forum/topico-duvida-pagina-contato-nao-fica-igual-da-aula-resolvido-256901), me fez refletir:
Se o cabeçalho e o rodapé FOREM os mesmos pra mais de uma página, não seria interessante criar um arquivo .CSS específico pra eles? E depois chamá-lo no "< head >" de cada HTML.
CSS com Cabeçalho e Rodapé
/*
- = - = = - CABEÇALHO - = - = = -
*/
header {
background: #BBBBBB;
padding: 20px 0;
}
.caixa {
position: relative;
width: 940px;
margin: auto;
}
nav {
position: absolute;
top: 110px;
right: 0;
}
nav li {
display: inline;
margin: 0 0 0 15px;
}
nav a {
text-transform: uppercase;
color: #000000;
font-weight: bold;
font-size: 22px;
text-decoration: none;
}
nav a:hover {
color: #c78c19;
text-decoration: underline;
}
/*
- = - = = - RODAPÉ - = - = = -
*/
footer {
text-align: center;
background: #CCC;
background-image: url(../images/footer-bg-black.jpg);
padding: 40px 0;
}
.copyright {
color: whitesmoke;
font-size: 13px;
margin-top: 20px;
}
.copyright span {
font-size: 11px;
font-weight: 100;
vertical-align: center;
} contato.html
<!DOCTYPE html>
<html>
<head>
<meta chaset="UTF-8">
<title>Contato - Barbearia Alura</title>
<link rel="stylesheet" href="./src/css/reset.css">
<link rel="stylesheet" href="./src/css/cabecalho-rodape.css">
<link rel="stylesheet" href="./src/css/style-contato.css">
</head>
</html>
