Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Randhir Rana
Randhir Rana
4,754 Points

Changing background color

I am trying to change the background color of my header in body. I have a background of my text already but I want to change the color of the background. I have seen this throughout some videos but can't remember how to do this. Here is how I set it up in CSS. Please help

'''/* Head */

h1 {

background:plum;
margin: 300px 0px 300px 0px;
text-align: center;

}

/* Main-Header */

.Main-Header { background-color:tomato; }

.p1 { margin: 200px 0px 200px 0px; }

.p2 { margin: 200px 0px 200px 0px; }

/* Main-Footer */

.footer { text-align: center; }'''

9 Answers

jordans
jordans
1,609 Points
jordans
jordans
1,609 Points

First of all, you're missing a div end tag for your div class "p1". Although, that's not the answer to your question, it'll probably cause problems in the future.

About your header problem. You need to specify a size (width or height) of your header in your CSS file. Usually, for headers I make the width: 100% and the height whatever you feel is necessary.

This will reset your body's margins and paddings:

body {
    margin:0;
    padding:0;
}

You set your position to absolute so you can position the header at the top if that's what you're looking for. If you want the header to stay at the top of your screen even when you scroll down the page, you can set the position to fixed.

The width is set to 100% so the header can go horizontally across your browser without you having to guess the size.

header {
    position: absolute;
    top: 0px;
    margin: 0px auto;
    background-color: #000;
    width: 100%;
    height: 300px;
}

I commented out your h1 margin's because I don't exactly know what you were doing. If you're trying to center the h1 tag or position it or any class, I suggest you read into containers and grids. They allow you to position classes more efficiently. Checkout the Bootstrap 3 tutorial.

h1 {
    background: plum;
    /* margin: 300px 0px 300px 0px; */
    text-align: center;
}

That's a very basic header for you. I suggest you start watching more tutorials. Everything else in your template isn't very well thought out.

Ted Sumner
PLUS
Ted Sumner
Courses Plus Student 17,967 Points
Ted Sumner
Ted Sumner
Courses Plus Student 17,967 Points

If you want the whole page, I have had the most success with this:

html,
body {
    background-color: tomato;
}
Randhir Rana
Randhir Rana
4,754 Points
Randhir Rana
Randhir Rana
4,754 Points

I want just a portion in the header a different color from the rest.

Ted Sumner
Ted Sumner
Courses Plus Student 17,967 Points

please post the html and the css formatted. The Markdown Cheatsheet tells you how. The ` is not a ' and must be on their own lines. The language can be after the first three.

Randhir Rana
Randhir Rana
4,754 Points
Randhir Rana
Randhir Rana
4,754 Points 
<!DOCTYPE html>

<html lang="eng">



    <head>
        <meta charset ="utf-8">
        <link rel="stylesheet" type="text/css" href="index.css">
        <title> Havana Studios|Makeup Artist
        </title>

    </head>

    <body> 

            <header >

            <h1 class="h1">
                Havana Studios

            </h1>

            </header>

        <hr>

            <section>

                <div class="p1">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus non finibus dolor. Aliquam hendrerit at lectus nec semper. Ut venenatis purus eget bibendum dictum. Suspendisse potenti. Sed ornare nulla risus, et porta dui pellentesque eget. Nunc rhoncus nunc nisi. Quisque convallis ac magna ac aliquet. Nulla sed varius justo, vitae auctor ante.
                </p>



                <div class="p2">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus non finibus dolor. Aliquam hendrerit at lectus nec semper. Ut venenatis purus eget bibendum dictum. Suspendisse potenti. Sed ornare nulla risus, et porta dui pellentesque eget. Nunc rhoncus nunc nisi. Quisque convallis ac magna ac aliquet. Nulla sed varius justo, vitae auctor ante.
                </p>
                </div>  




            </section>


        <footer>
            <p class="footer"> &copy;2015 Havana Studios.
            </p>

        </footer>

    </body> 





</html>

here is html

Randhir Rana
Randhir Rana
4,754 Points
Randhir Rana
Randhir Rana
4,754 Points 
/* Main-Header */
.h1 {
    background:plum;

    margin: 300px 0px 300px 0px;
    text-align: center;


}

/* Content*/



.p1  {

    margin: 200px 0px 200px 0px;

}

.p2 {

    margin: 200px 0px 200px 0px;
}




/* Main-Footer */

.footer {
    text-align: center;
}
Ted Sumner
PLUS
Ted Sumner
Courses Plus Student 17,967 Points
Ted Sumner
Ted Sumner
Courses Plus Student 17,967 Points

You may be running into problems because you have a class h1 and footer. I would change those classes if you need them, but you can also call them by the element type.

h1 = element type call. .class = class call.

If I recall, h1 and footer are reserved tags and should not be used for classes.

Randhir Rana
Randhir Rana
4,754 Points
Randhir Rana
Randhir Rana
4,754 Points

Originally i started by creating a class in the header tag like this html

<header class="main-header">

and linked it css

.main-header { background-color: orange; }

but this simply did not work

:(

Randhir Rana
Randhir Rana
4,754 Points 
<header class="main-header">
Ted Sumner
Ted Sumner
Courses Plus Student 17,967 Points

It is hard to tell without the entire css. If you make one error in a file, all of the rest of the css is often invalid.

Randhir Rana
Randhir Rana
4,754 Points
Randhir Rana
Randhir Rana
4,754 Points 
<!DOCTYPE html>

<html lang="eng">



    <head>
        <meta charset ="utf-8">
        <link rel="stylesheet" type="text/css" href="index.css">
        <title> Havana Studios|Makeup Artist
        </title>

    </head>

    <body> 

            <header>

            <h1>
                Havana Studios

            </h1>

            </header>

        <hr>

            <section>

                <div class="p1">

                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus non finibus dolor. Aliquam hendrerit at lectus nec semper. Ut venenatis purus eget bibendum dictum. Suspendisse potenti. Sed ornare nulla risus, et porta dui pellentesque eget. Nunc rhoncus nunc nisi. Quisque convallis ac magna ac aliquet. Nulla sed varius justo, vitae auctor ante.
                </p>



                <div class="p2">

                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus non finibus dolor. Aliquam hendrerit at lectus nec semper. Ut venenatis purus eget bibendum dictum. Suspendisse potenti. Sed ornare nulla risus, et porta dui pellentesque eget. Nunc rhoncus nunc nisi. Quisque convallis ac magna ac aliquet. Nulla sed varius justo, vitae auctor ante.
                </p>

                </div>  




            </section>


        <footer>
            <p class="copyright"> 

                &copy;2015 Havana Studios.

            </p>

        </footer>

    </body> 





</html
Randhir Rana
Randhir Rana
4,754 Points

disregard the last html tag it is missing >

Randhir Rana
Randhir Rana
4,754 Points
Randhir Rana
Randhir Rana
4,754 Points 
/* Main-Header */

header {
    background-color:#000;
}

h1 {
    background:plum;

    margin: 300px 0px 300px 0px;
    text-align: center;


}


/* Main-Content */

.p1  {

    margin: 200px 0px 200px 0px;

}

.p2 {

    margin: 200px 0px 200px 0px;
}




/* Main-Footer */

.copyright {
    text-align: center;
}
Randhir Rana
Randhir Rana
4,754 Points

So I took out the class in the header and just left it as is.

CSS is read above I still cant manage to change the backgorund color.