HTML
<!-- Versão do html - No HTML5 para informar ao navegador que estamos utilizando a última versão do HTML
precisamos apenas inserir html no DOCTYPE -->
<!DOCTYPE html>
<!-- <html> Elemento básico, todos os elementos do html devem estar dentro dessa tag,
todo documento html deve iniciar e terminar com essa tag
<html>
...
...
...
</html> -->
<html lang="pt-br">
<!-- <head> - Cabeçalho, onde colocamos as informações gerais do documento -->
<head>
<!-- Inserir a códificação para permitir acentuação -->
<meta charset="UTF-8">
<!-- Refencia ao arquivo CSS do projeto -->
<link rel="stylesheet" href="./css/style.css">
<!-- Definir o titulo da página -->
<title>Barbearia Alura</title>
</head>
<!-- <body> - Corpo, tudo que estiver entre essa tag será exibida no documento -->
<body>
<img src="./images/banner.jpg">
<h1>Sobre a Barbearia Alura</h1>
<p>Localizada no coração da cidade a <strong>Barbearia Alura</strong> traz para o mercado o que há de melhor para o seu cabelo e barba. Fundada em 2019, a Barbearia Alura já é destaque na cidade e conquista novos clientes a cada dia.</p>
<p id="missao"><em>Nossa missão é: <strong>"Proporcionar auto-estima e qualidade de vida aos clientes"</strong>.</em></p>
<p>profissionais experientes e antenados às mudanças no mundo da moda. O atendimento possui padrão de excelência e agilidade, garantindo qualidade e satisfação dos nossos clientes.</p>
</body>
</html>
CSS
/* Default - centralizar todos os elementos */
*{
text-align: center;
}
/* Colocando um fundo cinza na página */
body{
background: #cccccc;
}
/* Alterando o tamanho da fonte de 16px (default) para 20px.
CSS Selector = Selecione o elemento onde o id = "missao"
*/
#missao {
font-size: 20px;
}
/* Alterando a cor do texto que tem negrito e enfânse
CSS Selector = Selecione todos <strong> que estão dentro de <em> e dentro de um elemento com o id = "missao" */
#missao em strong{
color: #ff0000;
}