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 How to Make a Website CSS: Cascading Style Sheets What is CSS?

Carina Webb
Carina Webb
6,402 Points
Posted by Carina Webb
Carina Webb
6,402 Points

Footer colour not changing: just appearing at the top of my preview page as text?

Hi, I cannot seem to get my text (or even background for that matter) to change colour. Rather, it just seems to appear appear as text on the of my page when I preview it?

I have gone through other questions asked but I still can't seem to find a solution!

Thank you!

Rich Bagley
Rich Bagley
25,869 Points

Hi Carina,

Are you able to post some example code please?

Thanks

RIch

Sarah Hoopes
Sarah Hoopes
6,304 Points

So when you look at the preview, are you are seeing the words "background-color: blue;" (for example) instead of the actual color?

If so, was the code added to the index.html instead of the css file?

If it was added to the html by accident, I think that would cause this to happen.

3 Answers

Rich Bagley
Rich Bagley
25,869 Points

Hi Carina,

Can you try changing the line:

<stlye>

to:

<style>

and change:

</stlye>

to:

</style>

Does this help?

Thanks

-Rich

Carina Webb
Carina Webb
6,402 Points
Carina Webb
Carina Webb
6,402 Points

Oh gosh, I am such an idiot! Ah thank you so much, it works perfectly now! Sorry!

Jonathon Ouellette
Jonathon Ouellette
744 Points
Jonathon Ouellette
Jonathon Ouellette
744 Points 
footer {
     background-color: #fff;
     color: #999;
}

Basic coloring for a footer, make sure it is in your CSS page and not your html page (index.html)

Carina Webb
Carina Webb
6,402 Points
Carina Webb
Carina Webb
6,402 Points

Hi, thank you all for the quick response!

I think where I am getting confused is that when I am following along with the video it appears that I am working on the same page that Nick is (his seems to also have index.html as the title).

At this stage in the tutorial he mentioned we will be adding style tags to our html page which will later be deleted and we will be creating an external style sheet instead?

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Carina Webb | Designer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <stlye>
     footer {
      color: green;
      }
    </stlye>
  </head>
  <body>
    <header>
      <a href="index.html">
Shubham Gupta
Shubham Gupta
3,429 Points
Shubham Gupta
Shubham Gupta
3,429 Points

I think it's got something to do with the caching.

In Chrome, do this:

Hold Shift + Refresh the page

It worked for me, hopefully it works for you too.

Wells Chang
Wells Chang
1,673 Points
Wells Chang
Wells Chang
1,673 Points

^This. Thanks for saving me from endless refreshes!