Consolidando Conhecimentos

HTML

<main>
<p> fonte da imagem</p>

<section class="principal">
<h2 class="titulo-principal">Sobre a Barbearia Alura</h2>
<img class="utensilios" src="utensilios.jpg" alt="utensilios de um barbeiro">

<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>Oferecemos profissionais experientes e antenados às mudanças no mundo da moda. O atendimento possui padrão de excelência </p>
</section>

CSS

main > p {
   background: black;
   color: white;
   text-align: center;
}

img + p {
   background: #D3D3D3 ;
}

img ~ p {
   background: #D3D3D3;
}

.principal p:not(#missao) {
   background: #FFFFFF;
}