1
resposta

Aplicação das medidas relativas

Foi defino para HTML font-size de 120%, os REM,s abaixo estão sendo definidos a partir de 20px ou pelo 120%?

Muito confuso esse assunto, deveriam ter exercícios bem direcionados/específicos para treinarmos.

insira se.titulo-principal {
    font-size: 300%;
    text-align: center;
    background-color: #851944;
    color: #FFF;
    padding: 1.25rem;
    border-bottom: .5rem solid #000;
}
1 resposta

Seguindo a lógica que mostrei no seu outro tópico, .5rem será o equivalente à metade da altura fonte da raiz. Que nesse caso é a tag <html>. Ou seja, é a metade dos 120%.

Imaginemos que o tamanho padrão da fonte que o usuário escolheu para o seu navegador é 10px. Ao colocar o font-size: 120%; na tag html, a fonte usada no seu site terá o tamanho de 12px (120% da fonte do navegador). Já dentro do seu código CSS, 0.5rem será equivalente a 6px (metade da fonte do html).