Solucionado
Quando estou estilizando meu "P":
Meu Código:
<p class="importante primeiro">Meu CSS:
.primeiro {
font-size: 40px;
text-align: center;
}
.importante {
font-size: 30px;
font-weight: bold;
}
p {
font-size: 16px;
text-align: left;
}Não seria o correto ele pegar a última classe do estilo, ficando:
fonte de 40 pixels, negrita, texto centralizadoOu a ordem do meu CSS interfere no resultado?
No exercício sobre conflito entre classes o instrutor informa que o critério de desempate para esse conflito é a classe que estiver por último no arquivo CSS. Ou seja, no seu exemplo, como a classe ".importante" está por último (mais abaixo), a propriedade font-size: 30px; sobrepõe a font-size: 40px;.
Olá Rodolfo! A ordem no CSS importa sim, pois a leitura é feita de cima para baixo. Sendo assim, a classe importante sobrepõe a classe primeiro. E a tag p nesse caso não interfere pois as classes tem uma importância maior que as tags.
Abraços e bons estudos!
Prezados, se é 40px, então precisam corrigir a resposta do exercício que está 30px.
Talvez por falta de atenção na leitura você não compreendeu, mas ele disse que a classe .importante sobrepõe a .primeiro, então o que vale são os 30px da classe .importante. Eu disse basicamente a mesma no meu comentário também.
Será que entendi errado? Poderia me explicar melhor então o enunciado abaixo, referente ao exercício 12: Como podemos colocar mais de uma classe em um elemento, é possível que haja conflito entre regras declaradas nas duas classes. Por exemplo:
.destaque { font-size: 40px; color: red; } .titulo-principal { background-color: purple; color: white; } Se fizermos um elemento com ambas as classes, o navegador precisa decidir quais propriedades de cada classe usar! O critério de desempate é qual das classes aparece por último no arquivo CSS. Então, no exemplo acima, o elemento com as duas classes terá a fonte com 40 pixels, o fundo roxo e o texto branco.
Continua valendo o que nós dissemos. O código CSS que você mandou é esse:
.destaque {
font-size: 40px;
color: red;
}
.titulo-principal {
background-color: purple;
color: white;
}E o HTML correspondente é esse:
<div class="destaque titulo-principal">A <div> tem as duas classes, e o que é informado no texto do exercício é que o problema de conflito entre classes é resolvido de acordo com a classe que tiver sido declarada por último no arquivo CSS. Se você observar o código CSS, a classe .titulo-principal foi criada por último, então se a classe .destaque tiver alguma propriedade em conflito com a .titulo-principal, o que vai prevalecer são as propriedades da classe .titulo-principal.
No caso, a única propriedade em comum nas duas classes é a color:. Das duas propriedades color:, a que vai prevalecer na <div> é a color: white; que é da classe .titulo-principal.
Pelo que vi no exercício, acredito que você está confundindo o código exemplo do enunciado com o código real do enunciado. Se você notar bem, há uma breve explicação na primeira parte do enunciado com esse código que você falou, depois, lá em baixo, há outro código CSS diferente que é o que a questão realmente leva em consideração.