2

Como faço pra mudar somente a cor do header e não do corpo inteiro do site? Já tentei colocando background: #fff; mas não dá certo.

Tentei isto, porem sem sucesso:

<header class="header">
    <h1> SAMCRO </h1>
    <h2> Sons of Anarchy </h2>
</header>

.header {
    background-color: #fff;
}
4
  • 2
    Carlos, edit sua resposta adicionando algum código, de preferência o HTML da página para que possamos te ajudar. Aproveite e faça um tour pelo StackOverflow pt. Commented 9/12/2015 às 0:13
  • Fiz exatamente como foi explicado, e simplesmente não dá certo aqui. Editei a pergunta e coloquei o código Commented 9/12/2015 às 0:46
  • Carlos, como você está declarando o CSS ? Está importando um arquivo para o HTML ou declarando direto na página ? Commented 9/12/2015 às 0:59
  • 1
    Testei seu código e funcionou. Se estiver declarando o CSS na página HTML, não esqueça de colocá-lo dentro das tags <style></style> Não esqueça também, que a cor que você está declarando é branco, ou seja, se seu background for branco, você não irá ver as alterações kk Commented 9/12/2015 às 1:55

2 Respostas 2

1

Isto vai depender de como está estruturado seu HTML, com o código que você postou não há muito o que fazer a não ser supor que este header seja o primeiro filho direto em body.

Acredito que a forma mas fácil é atribuir um ID ao elemento. IDs são únicos no documento e pode ser usado neste caso, já que você está pretendendo definir regras que afetarão um único elemento. Algumas opções:

Definindo um id para o elemento

#esse-header { background: red }
<header id='esse-header' class="header">
    <h1> SAMCRO </h1>
    <h2> Sons of Anarchy </h2>
</header>

<header class="header">
    <h1> SAMCRO </h1>
    <h2> Sons of Anarchy </h2>
</header>

<header class="header">
    <h1> SAMCRO </h1>
    <h2> Sons of Anarchy </h2>
</header>

Pegando com :first-child

header:first-child { background: red }
<header class="header">
    <h1> SAMCRO </h1>
    <h2> Sons of Anarchy </h2>
</header>

<header class="header">
    <h1> SAMCRO </h1>
    <h2> Sons of Anarchy </h2>
</header>

<header class="header">
    <h1> SAMCRO </h1>
    <h2> Sons of Anarchy </h2>
</header>

Pegando por :nth-of-type

header:nth-of-type(1) { background: red }
<header class="header">
    <h1> SAMCRO </h1>
    <h2> Sons of Anarchy </h2>
</header>

<header class="header">
    <h1> SAMCRO </h1>
    <h2> Sons of Anarchy </h2>
</header>

<header class="header">
    <h1> SAMCRO </h1>
    <h2> Sons of Anarchy </h2>
</header>

Pegando com :nth-child

header:nth-child(1) { background: red }
<header class="header">
    <h1> SAMCRO </h1>
    <h2> Sons of Anarchy </h2>
</header>

<header class="header">
    <h1> SAMCRO </h1>
    <h2> Sons of Anarchy </h2>
</header>

<header class="header">
    <h1> SAMCRO </h1>
    <h2> Sons of Anarchy </h2>
</header>

1
1

Presumindo que seu header é a tag propriamente dita, leia sobre está tag do HTML5 magnifica aqui.
A interação entre HTML e CSS permite que você adicione classes nas tags HTML, como por exemplo <header class="uma-classe"></header>, definindo uma classe, com CSS, você consegue manipular o estilo da mesma, esse estilo reflete na tag, consequentemente na página.

.header {
  background-color: #000;
  color: #fff;
}
<body>
  <header class="header">
    <h1>Titulo do Cabeçalho</h1>
  </header>
  
  <section>
      <h2>Titulo de uma seção</h2>
      <p>Paragrafo de uma seção.</p>
  </section>
  
  <footer>
    <a href="#">Link no rodapé.</a>
  </footer>
</body>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .