How do I change only the color of the header and not the entire body of the site? I've tried putting background: #fff; but it does not work.
I tried this, but without success:
<header class="header">
<h1> SAMCRO </h1>
<h2> Sons of Anarchy </h2>
</header>
.header {
background-color: #fff;
}
This will depend on how your HTML is structured, with the code you posted there is not much to do except assume that header is 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 planning to define rules that will affect a single element. Some options:
#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>: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>: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>: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> Assuming your header is tag itself, read about tag of HTML5 magnifica here . The interaction between HTML and CSS allows you to add classes in tags HTML , such as <header class="uma-classe"></header> , defining a class , with CSS , you can manipulate the style of it, this style reflects on 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>