Background color not showing behind text css

October 25, 2023

I’m having trouble with this assignment, I tried to add a background color to only the header but it doesn’t show up behind the text here is the css:

*{
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    color: aliceblue;
    background-color: #2a292b;
}
header{background-color: #3d3747;}
h1{font-size: 50px;text-align: center}
h2{font-size: 40px;text-align: center}
h3{font-size: 30px;text-align: center}
p{font-size: 20px;text-align: center; line-height: 1.5;}

and here is the html:

<body>
    <header >
        <h1>Youssef Sfexi</h1>
        <nav>
            <ul>
                <li><a href="#about">About</a></li>
                <li><a href="#portfolio">Portfolio</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
    <hr>
    </header>
    <section>
        <p> paragraph </p>
    </section>
</body>

here’s the output i got:

I tried to add a background color to only the header but it doesn’t show up behind the text

>Solution :

It might be because you’re using * selector and setting the background color there. This rule will set all elements’ background color to #2a292b, including all <header>‘s children.

Alternatively, try to set the base rules to body:

body {
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    color: aliceblue;
    background-color: #2a292b;
}