1
resposta

Estilos Sobrescrevendo Estilos

Tenho dois arquivos css em minha página: arquivo1.css e arquivo2.css .

A ordem que os arquivos são referenciados (na tag head da página) é ...

<link type="text/css" rel="stylesheet" href="arquivo1.css">
<link type="text/css" rel="stylesheet" href="arquivo2.css">

No arquivo1.css tenho ....

*{
    margin: 0px;
    padding: 0px;
    font-family: Arial, Helvetica, Sans-Serif;
    font-size: 12pt;
}

No arquivo2.css tenho ....

h1#titulo_aplicacao.cabecalho{
    margin-left: 30pt;
    font-size: 25pt !important;
}

Minha intenção é que a fonte de h1#titulo_aplicacao.cabecalho tenha 25 pt, mas o tamanho de fonte defino no arquivo1.css sempre se sobresai....

1) Como resolver isso?

2) em que ordem os estilos definidos em diferentes arquivos css são aplicados nos elementos? É a ordem em que os arquivos aparecem no head ?

1 resposta

Olá, Marcelo! Tudo bem?

Os estilos são sobrescritos por ordem de importação, como você disse na sua segunda pergunta, então, provavelmente não é isso. Você poderia confirmar que o HTML está correto? Um <h1> com ID titulo_aplicacao e classe cabecalho? Se puder compartilhar aqui esse código HTML também, poderei te ajudar melhor.

De toda forma, supondo que só tenha um elemento do HTML com o ID titulo_aplicacao, você não precisa construir o seletor com elemento, ID e classe, pode fazer apenas:

#titulo_aplicacao {
  margin-left: 30pt;
  font-size: 25pt;
}

Espero ter ajudado!