Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

HTML How to Make a Website Customizing Colors and Fonts Use Classes in CSS

Inga Zarecka
Inga Zarecka
1,488 Points

body selector, but only footer changed color?

I'm confused about the very last part of the video. We choose the selector - body - and set the color: grey. But body includes everything. Why only footer color changed?

4 Answers

Can you provide your code?

Inga Zarecka
Inga Zarecka
1,488 Points

main.css

/**************************** GENERAL ***************************/

wrapper {

max-width: 940px; margin: 0 auto; padding: 0 5%; align-items: }

a { text-decoration: none; }

/**************************** HEADING ***************************/

logo {

text-align: center; margin: 0; }

h1 { font-family: 'Changa One', sans-serif; margin: 15px 0; font-size: 1.75em; /* relative unit of measurements, it's a multiplier */ }

/**************************** COLORS ***************************/

a { color: #6ab47b; }

header { background: #6ab47b; border-color: #599a68; }

/* fff is the same as ffffff */ h1,h2 { color: #fff; }

nav { background: #599a68; }

/* nav a:visited - makes sure that even visited links are the same */

nav a, nav a:visited { color: #fff; }

nav a.selected, nav a:hover { color: #32673f; }

body { background-color: #fff; color: #999; }

Inga Zarecka
Inga Zarecka
1,488 Points

index.html

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Inga | Designer</title> <link rel="stylesheet" href="css/normalize.css"> <link href="https://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,400i,700,700i,800" rel="stylesheet"> <link rel="stylesheet" href="css/main.css"> </head> <body> <header> <a href="index.html" id="logo"> <h1>Inga</h1> <h2>Dancer</h2> </a> <nav> <ul> <li><a href="index.html" class="selected">Portfolio</a></li> <li><a href="about.html">About</a></li> <li><a href="contacts.html">Contact</a></li> </ul> </nav> </header> <div id="wrapper"> <section> <ul> <li> <a href="img/numbers-01.jpg"> <img src="img/numbers-01.jpg" alt=""> <p>Experimentation with color and texture</p> </a> </li> <li> <a href="img/numbers-02.jpg"> <img src="img/numbers-02.jpg" alt=""> <p>Playing with blending modes in Photoshop</p> </a> </li> <li> <a href="img/numbers-06.jpg"> <img src="img/numbers-06.jpg" alt=""> <p>Trying to create an 80's style of glows</p> </a> </li> <li> <a href="img/numbers-09.jpg"> <img src="img/numbers-09.jpg" alt=""> <p>Drips created using Photoshop brushes</p> </a> </li> <li> <a href="img/numbers-12.jpg"> <img src="img/numbers-12.jpg" alt=""> <p>Something else</p> </a> </li> </ul> </section> <footer> <a href="http://twitter.com"><img src="img/twitter-wrap.png" alt="twitter logo"></a> <a href="http://facebook.com"><img src="img/facebook-wrap.png" alt="facebook logo"></a> <p>© 2016 Inga Zarecka.</p> </footer> </div> </body> </html>

Julien riera
Julien riera
14,665 Points

Hello,

I'll make it short but you have to consider what CSS stands for: Cascading Style Sheets.

The last lines of your code will have the "last word".

Here is an example:

body {
    background-color: white;
}

h1 {
    color: red;
}

div {
    background-color: green;
}

h1 {
    color: blue;
}

So, after linking this .css file to your .html file, all your <h1> tags will be blue; you <body> background will be white, but your <div>s backgrounds will be green, as they "come later" in the cascade.

This means you create your .css file from the most global scope (top), to the specific things (bottom). That's the general logic. For exemple, you'll set your <p> tags with a 20px margin (every direction), and later in the file you'll target a specific paragraph with a class or an id, and set its margin with something different, say 10px.

So in this case, all of your paragraphs will have a 20px margin but the one with the class/id, which has a 10px margin.

I hope I'm clear!

Cheers,

Julien