1
resposta

Colocando em Prática.

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>

        <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><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

/* Colocando um fundo cinza na página */
body{
    background: #cccccc;
}

/* Centralizando o texto do <h1> e todos os <p> */
p, h1{
    text-align: center;
}

/* Alterando o tamanho da fonte de 16px (default) para 20px. 
CSS Selector = Selecione todos os <em> que estão dentro de um <p>
*/
p em  {

    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 <p> */
p em strong{
    color: red;
}

1 resposta

Oi Antonio, tudo bem?

Respondi seu outro tópico, mas vou mandar nesse aqui também:

Adorei que você comentou o seu código,

<!-- <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> 

Assim além de fixar o que você viu em aula, quando for ler depois vai entender perfeitamente o por quê de cada coisa que você fez no código! Isso é ótimo especialmente para quem tá começando.

Parabéns!

E bons estudos.