Por que o navegador não lê estilo do código?

Boa tarde, Héron! Tudo bem?

Tem como confirmar se você fechou essa <div class="area-calculo">? Você escreveu sem no seu tópico, então não sei se no seu código também está sem o fechamento </div>, e sem ele os estilos não são aplicados.

<div class="area-calculo">

                    <p><h1>Opção: primeira</h1></p>
                    <p>texto parágrafo</p>
</div>

Fico no aguardo!

Boa noite. Tudo bem, Mônica!

A div estava fechada sim.

Acredito que o css estava priorizando o estilo dos elementos (h1 e p) contidos na div, que estavam selecionados antes da class area-calculo no css, e fora dessa div, mas não tenho certeza se é assim que funciona.

O código funcionou quando alterei da seguinte forma:

.area-calculo {

    float: right;
    width: 894px;
    height: 385px;
    background: #D3D3D3;
    border-radius: 10px;
    box-shadow: inset 0 0 1em grey;
    padding: 10px;
    margin: 10px; 


}


.area-calculo h1 {

    font-size: 25px;
    text-align: center;
    font-weight: bold;
    text-decoration: underline;
    margin: 0 0 1em 0;
}

.area-calculo p {

    font-size: 20px;
    margin: 0 0 1em 0;
}

Então a técnica que usei foi especificar os itens h1 e p de dentro da class dessa maneira, para poder estilizá-los. Estou investigando quais as melhores maneiras de organizar o código ainda...

Obs.: Estou nas primeiras aulas de HTML e CSS ainda.

Boa tarde!

Agora acho que entendi! Você colocou um estilo nos h1 e p gerais da página e gostaria de aplicar estilos diferentes nos que estão dentro da .area-calculo, correto?

Se você não botar classes ou id nesses elementos html eles não vão entender que são especificamente os que estão dentro da div, somente se você especificar o pai deles, que nem você fez: .area-calculo h1.

Se referenciar eles apenas pela sua tag (h1 ou p) ele irá aplicar em todos da página, se você novamente escrever novamente estilos pra ele consequentemente irá sobrescrever os estilos de antes.

Para não ter que escrever a classe do elemento que está acima (area-calculo), você pode dar uma classe pra essas tags:

<div class="area-calculo">
    <p><h1 class="opcao">Opção: primeira</h1></p>
    <p class="descricao">texto parágrafo</p>
</div>

Então você chamaria no CSS assim:

.opcao {
//estilos
}

.descricao {
//estilos
}

Cada elemento do html percorre o arquivo CSS inteiro procurando os estilos que serão aplicados, então acabamos tendo que especificar bem detalhado para um não pegar o estilo do outro. Nas próximas aulas acredito que vai dar pra entender melhor isso na prática :)

Caso não tenha ficado muito claro ainda (as vezes fica dificil expressar tudo por mensagem escrita) pode me retornar. Bons estudos!

Era isso mesmo, na prática e com vídeos fica muito mais fácil, eu acho.

Estou prosseguindo com os estudos de front-end e espero que no decorrer do curso eu obtenha maior clareza e destreza.

Obrigado.