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 Trista Ramirez
Trista Ramirez
1,147 Points

HOW do I change the color of the page I am on? CSS and HTML? Font color.

For example when I am on my website and I am on the about page it will not change to a darker color to let you know what page you are on only my home page??

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

body { font-family: 'Open Sans', sans-serif; }

wrapper {

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

a { text-decoration: none; }

img { max-width: 100%; }

h3 { margin: 0 0 1em 0, }

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

header{ float: left; margin: 0 0 30px 0; padding: 5px 0 0 0; width: 100%; }

logo{

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

h1 { font-family: 'Muli', sans-serif; margin: 20px 0; font-size: 1.50em; font-weight: normal; line-height: 0.8em;

}

h2 { font-size: 0.75em; margin: -5px 0 0; font-weight:normal; }

/***************** NAVIGATION *****************/

nav { text-align: center; padding: 10px; margin: 20px 0 0; }

nav ul { list-style: none; margin: 0 10px; padding: 0; }

nav li { display: inline-block; }

nav a{ font-weight: 800; padding: 15px 10px; }

/***************** FOOTER *****************/

footer{ font-size: 0.75em; text-align: center; clear: both; padding: 50px; color: #ccc; }

.social-icon { width: 20px; height: 20px; margin: 0 5px; }

/***************** PAGE PORTFOLIO *****************/

gallery {

margin: 0; padding: 0; list-style: none; }

gallery li {

float: left; width: 45%; margin: 2.5%; background-color: #f5f5f5; color: #bdc3c7; }

gallery li a p {

margin: 0; padding: 5%; font-size: 0.75em; color: #bdc3c7; }

/**************** PAGE: ABOUT *****************/

.profile-photo { display: block; max-width: 150px; margin: 0 auto 30px; border-radius: 100%; }

/**************** PAGE: CONTACT *****************/

.contact-info { list-style: none; padding: 0; margin: 0; font-size: 0.9em; }

.contact-info li.phone a { background-image: url('../img/phone.png'); }

.contact-info li.mail a { background-image: url('../img/mail.png'); }

.contact-info a { display: block; min-height: 20px; background-repeat: no-repeat; background-size: 20px 20px; padding: 0 0 0 30px; margin: 0 0 10px; }

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

/* site body */ body{ background-color: #fff; color: #999; }

/* logo text */ header{ background: #6ab47b; border-color: #599a68; }

/* nav background on mobile */ nav{ background: #599a68; }

/* logo text */ h1, h2 { color: #fff; }

/* links */ a { color: #6ab47b; }

/* nav link */ nav a, nav a:visited { color: #fff; }

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

John Lukacs
John Lukacs
26,806 Points

Body{ background-color: #000000; }

10 Answers

Trista Ramirez
Trista Ramirez
1,147 Points
Trista Ramirez
Trista Ramirez
1,147 Points

Didn't do the trick?

John Lukacs
John Lukacs
26,806 Points
John Lukacs
John Lukacs
26,806 Points

You have it already posted in the html. And then you added a color property which I don't understand. your background color is fff look at your code with the comment colors did you add my solution after what you wrote the cascade should take care of that

Trista Ramirez
Trista Ramirez
1,147 Points
Trista Ramirez
Trista Ramirez
1,147 Points

I'm talking about the font color.

Luke Belinc
Luke Belinc
5,121 Points
Luke Belinc
Luke Belinc
5,121 Points

You should try using separate .css files. Using one universal stylesheet will only allow you to use one body color, but if you link a different stylesheet per page you're on then that should fix your problem. Hope this helped!

John Lukacs
John Lukacs
26,806 Points
John Lukacs
John Lukacs
26,806 Points

Write a new selector targeting the p or h1 or a or whatever p{color: #whatever you like;} And erase the others color selector but it should over right it /***** your code a { color: #6ab47b; } body{ background-color: #fff; color: #999; } thats what you wrote

Luke Belinc
Luke Belinc
5,121 Points
Luke Belinc
Luke Belinc
5,121 Points

If you're looking to change the font color, try adding a class or id to the parent element of the body of text you're trying to alter and then in your css create a rule that modifies the specific body of text you're talking about.

Trista Ramirez
Trista Ramirez
1,147 Points
Trista Ramirez
Trista Ramirez
1,147 Points

I was just trying to get the font of the page that I'm on to be darker when I'm on a certain page. Does that make sense?

Luke Belinc
Luke Belinc
5,121 Points
Luke Belinc
Luke Belinc
5,121 Points

So if you're trying to get the font to be darker on the about page, then make a separate css file for the separate about page with something like this in the css file:

body {
    color: maroon;  /* or which ever color you want to choose */
}

If you have all of the pages sourcing the same css file then they're all going to look the same unless each paragraph that you're trying to change the text color of is explicitly identified using a class or id in the main css file.

Trista Ramirez
Trista Ramirez
1,147 Points
Trista Ramirez
Trista Ramirez
1,147 Points

Ahh I'm so confused? It works on the profile link but nothing else?

John Lukacs
John Lukacs
26,806 Points
John Lukacs
John Lukacs
26,806 Points

You cannot write it twice you have to replace it with what you want. I think you have already written it; that is changing the color of the font of text. Look threw the code for the selector and change it