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

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

Inga Zarecka
Inga Zarecka
1,488 Points
Posted by 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

Alexander Davison
Alexander Davison
65,469 Points
Alexander Davison
Alexander Davison
65,469 Points

Can you provide your code?

Inga Zarecka
Inga Zarecka
1,488 Points
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
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
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