How to change color of css header only

Asked

Viewed 7,394 times

2

How do I change only the header color and not the entire body of the site? I’ve tried putting background: #fff; but it doesn’t work.

I tried this, but to no avail:

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

.header {
    background-color: #fff;
}
html css
  • 2

    Carlos, select your answer by adding some code, preferably the HTML page so we can help you. Enjoy and make a tour by Stackoverflow pt.

  • I did exactly as explained, and it just doesn’t work here. I edited the question and put the code

  • Carlos, how are you declaring CSS ? You are importing a file into HTML or declaring it right on the page ?

  • 1

    I tested your code and it worked. If you’re declaring CSS on the HTML page, don’t forget to put it inside the <style></style> tags Also, don’t forget that the color you’re declaring is white, that is, if your background is white, you won’t see the kk changes

2 answers

1

Assuming that your header is the tag properly said, read about this tag of HTML5 magnificent here.
The interaction between HTML and CSS allows you to add classes in tags HTML, as an example <header class="uma-classe"></header>, defining a class, with CSS, you can manipulate the style of the same, this style reflects in tag, consequently on the page.

.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>

1


This will depend on how your HTML is structured, with the code you posted there is not much to do but assume that this header be the first direct child in body.

I believe the easiest way is to assign an ID to the element. Ids are unique in the document and can be used in this case, since you are intending to define rules that will affect a single element. Some options:

Setting an id for the element

#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>

Picking on :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>

Getting by :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>

Picking on :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>

  • We must remember to use Ids is not a good practice for defining styles in HTML. http://answall.com/a/11167/26636. However, it was a good answer. :)

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.