CSS Códigos de CSS em conflito

[Jackson Boss]

Boa noite amigos do CDH, como estão? Comecei a estudar HTML5 e CSS a poucos dias, estou fazendo varios tutoriais que encontro na internet, criando sites testes e adicionando varios elementos para aprender mais, minha dúvida é a seguinte: Quero colocar um Pricing Table no meu site, procurei alguns modelos e reparei a seguinte coisa:

Esse é um exemplo de código CSS que tenho que colocar pro meu Pricing table funcionar corretamente, mas se eu colocar ele no .CSS do meu site, o body, section ,h1 2 3..., html e etc entram em conflito com os mesmos que eu ja tenho em meu site, o que eu faço nesse caso para poder colocar corretamente esse código sem interferir e estragar o layout do meu site?

 

[DiF]

@Jackson Boss Olá.

 

Pelo que estou vendo na imagem, não parece ser referente ao "pricing table".

Tudo que tem ali é elementos de reset no CSS.

 

Você tem algumas opções para resolver isso, mas penso em duas delas:

• Não colocar esta parte que conflita e você mesmo criar as regras CSS para sua tabela de preços;
• Você pode colocar o !important nas regras CSS que você quer que seja a "oficial".

 

O código acima, também é parte do normalize.CSS que é um arquivo css reset para zerar os estados iniciais dos elementos.

Justamente para que possas desenvolver o CSS de forma mais limpa e que seja compatível.

 

Ademais, seria interessante você postar um exemplo de pricing table... ou até mesmo o seus códigos..  para ser analisado. 

[Jackson Boss]

@DiF Oi DiF tudo bem? Realmente, alguns dos codigos CSS ali são de "demo" coisas pra outras finalidades, mas a questão continua a mesma, obrigado pelas suas dicas, a primeira consegue solucionar o problema, já a segunda eu não entendi muito bem, posso colocar "importante" apenas para o pricing list ou se eu colocar a outra em "importante" vai ter risco de mudar algo no layout do site? Se for a primeira opção, soluciona o problema também, vou testar quando chegar em casa, muito obrigado, vendo agora, são errinhos "básicos" que alguem estressado não consegue ver, hahaha, muito obrigado de novo 

[DiF]

@Jackson Boss

Boa noite, 

A questão sobre as dicas é o seguinte.

A primeira consiste em apenas criar uma regra para a tabela, sem usar aqueles resets.

Por exemplo:

/*Configuração  geral da Tabela*/
table { border-collapse: collapse; width: 100%; }

/*configuração do TH e TD*/
th, td { text-align: left; padding: 8px; }

/*
  Faz com que crie efeito zebra guiado pelo número ímpar
  Se quiser fazer pelo número par, troca o even por odd
*/
tr:nth-child(even){background-color: #f2f2f2}

/*Configuração da TH*/
th { background-color: #4CAF50; color: white; }

/*
  Insere o R$ na frente dos valores de preço, 
  excluíndo o primeiro TD de Estados
*/
table td:not(:first-child)::before { 
      content: "R$ ";
}

Exemplo online: https://jsfiddle.net/dife/qy4bj8qq/

 

Já a segunda sugestão, consiste em usar o atributo !important.   Este atributo faz com que a regra css sobrescreva outra regra existente. Em outras palavras, ele não segue a hierarquia e prevalece sobre todos os outros.

 

Exemplo:

HTML:

<div class="azul"></div>
<div></div>

 

CSS:

div{
  width: 100px;
  height:100px;
  background: red !important;
  display: inline-block;
}


.azul{
  background: blue;
}

Neste exemplo temos dois elementos DIV, onde um deles tem uma CLASS chamada azul. Esta classe define que a cor de fundo é azul.

Porém, ao executar, ambos elementos ficam vermelhos. Por que?

Porque o atributo !important foi declarado no elemento DIV.  Logo, aquela regra para a cor de fundo prevalecerá sobre todas as outras, mesmo que se elas tiverem outras cores definidas.

Exemplo online: https://jsfiddle.net/dife/cmcmLqa6/

 

PS: experimente retirar o !important dali do exemplo e clicar em "Run"!