3
respostas

h2 não está estilizando

Definimos o estilo do h2 no arquivo carrossel.css, mas ele não está sobrescrevendo o body que estilizamos no styles.css.

A estilização só funciona quando trago o código abaixo pra dentro do styles css

.carrossel__titulo{
    color: var(--laranja);
    background-color: var(--branco);
    text-align: center;
    text-transform: uppercase;
    font-size: 18px;
    font-weight: 700;
    padding: 1em 0 0.5em 0;
}

e coloco ele logo abaixo de

body{
    background-color: var(--cor-de-fundo);
    font-family: var(--fonte-principal);
    font-size: 16px;
    font-weight: 400;
}
3 respostas

Se o estilo do h2 no arquivo carrossel.css não está sobrescrevendo o estilo definido no body em styles.css, pode haver várias razões para isso. Aqui estão algumas sugestões para resolver o problema:

  1. Especificidade do Seletor: Certifique-se de que o seletor que você está usando para o h2 em carrossel.css é pelo menos tão específico quanto o seletor usado para o body em styles.css. Se o seletor do body for mais específico, ele terá precedência.

    Exemplo:

    /* styles.css */
    body {
        background-color: var(--cor-de-fundo);
        font-family: var(--fonte-principal);
        font-size: 16px;
        font-weight: 400;
    }
    
    /* carrossel.css */
    body .carrossel__titulo {
        color: var(--laranja);
        background-color: var(--branco);
        text-align: center;
        text-transform: uppercase;
        font-size: 18px;
        font-weight: 700;
        padding: 1em 0 0.5em 0;
    }
    
  2. Ordem de Importação: Verifique se o arquivo carrossel.css está sendo importado após o styles.css. As regras definidas posteriormente no código têm mais peso e substituem as regras definidas anteriormente.

    Exemplo:

    <!-- No seu HTML -->
    <link rel="stylesheet" type="text/css" href="styles.css">
    <link rel="stylesheet" type="text/css" href="carrossel.css">
    
  3. Conflitos de Variáveis CSS: Certifique-se de que as variáveis utilizadas nos dois arquivos CSS estão sendo definidas corretamente e não estão causando conflitos.

Se, mesmo após verificar esses pontos, o problema persistir, pode ser útil revisar o código mais detalhadamente ou fornecer mais informações sobre o código específico para que eu possa oferecer uma solução mais precisa.

Caso tenha conseguido esclarecer suas dúvidas, fico feliz em ter ajudado. Estou à disposição para qualquer outra questão que possa surgir. Um abraço! Se este post foi útil, por favor, marque como solucionado ✓. Desejo a você excelentes estudos!

Fala carlos,

se fizer essa especificidade q você fez, funciona, porque voce está sobrescrevendo o body na marra.. utilizando o seletor da classe dentro dele. mas o que ela fez na aula não foi isso. ela apenas aplicou o seletor da classe.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software