Entrar Ainda não tem acesso?
1
resposta

Fiz um pouco diferente

Referente ao curso HTML5 e CSS3 parte 1: crie uma página da Web, no capítulo Trabalhando com CSS e atividade Consolidando o seu conhecimento

por Estudante
| 44.8k xp | 73 posts

Meu código de HTML ficou assim:

<!DOCTYPE =html>
<html lang-"pt-br">
    <meta charset="UTF-8">
    <head>
        <title style="text-align:center">Barbearia Alura</title>
        <link rel="stylesheet" href="style.css"/>
    </head>
<body>
    <h1 id="title1">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 class="frase"><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 e agilidade, garantindo qualidade e satisfação dos nossos clientes.</p>
</body>
</html>

Já o meu CSS, dessa forma:

body {
background-color: #cccccc;}

#title1 {
    text-align:center; background-color: #cccccc;
}
p {
    text-align:center;
}

.frase {
    font-size:20px;
}

em strong {
    color: red;
}

Existe alguma forma de por exemplo, concatenar dois elementos que recebem o mesmo atributo, por exemplo H1 e p recebendo "text-align:center"?

1 resposta
por João Pedro Deantoni Tavares
| 95.6k xp | 1 posts
Product Owner

Opa Cristian,

O que eu faria neste caso...

Eu englobaria a mesma classe "texto" para H1 e P (específica que você quer centralizar). Ficando o HTML assim:

<!DOCTYPE html>
<!DOCTYPE html>
<html lang-"pt-BR">
  <head>
    <meta charset="UTF-8">
    <title>Barbearia Alura</title>
    <link rel="stylesheet" href="style.css"/>
  </head>
  <body>
    <h1 class="texto">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 class="texto"><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 e agilidade, garantindo qualidade e satisfação dos nossos clientes.</p>
  </body>
</html>

Já no CSS, eu centralizaria o "text-align: center;" na classe ".texto" e o "font-size: 20px;" no . Ficando assim:

body {
  background-color: #cccccc;
}

.texto {
  text-align:center; 
}

em {
  font-size:20px;
}

em strong {
  color: red;
}

Espero ter ajudado. Abraços