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.

CSS

What is Css?

Lordy, In windows, this is my input: <meta charset = "utf-8"> <title>Patti Nearing|Web Designer</title> <link rel="stylesheet" href="css/normalize.css"> <style> footer { color: green; }
</style>

When I use this HTML, it does not turn my color to green, my footer color is Black. What am I missing NOW ??

Could you include your code

<meta charset = "utf-8"> <title>Patti Nearing|Web Designer</title> <link rel="stylesheet" href="css/normalize.css"> <style> footer { color: green; }
</style>

Well Dustin, I copied and pasted but it does not show the code, just the english. How do I show you my code ??

24 Answers

Yup, it worked !!! Oh good grief !!!!

Michael Hulet
Michael Hulet
47,842 Points

Computers are picky, and even the best of us make tiny oversights like that all the time. Post here if you need any more help

Probably I didn't get your code very well but what I got that you want to change the background of the footer:

footer{
   background-color: green;
}

This what you want?

EDIT:

IF you want to show your code you try this tag <code></code>

Michael Hulet
Michael Hulet
47,842 Points

To show code in the Treehouse Forum, you wrap it in 3 backticks (it's on the same key as the tilde (~)) if it's a block, or just one, if it's inline. You can check out the Markdown Cheatsheet at the bottom of this thread (under the "Add an Answer" box) for more information

<html> <head> <meta charset = "utf-8"> <title>Patti Nearing|Web Designer</title> <code> <link rel="stylesheet" href="css/normalize.css"> <style> footer { background-color: green; }
</style> </code>

when I input the background-color:; green; I t changed the Facebook image line to green. What Nick, shows on the video is just color: green; It is supposed to turn the ink to green on the copyright line.

Okay if you want the link to turn green select the a not the footer

<code> <link rel="stylesheet" href="css/normalize.css"> <style> footer { color: green; }
</style> </code>

Michael Hulet
Michael Hulet
47,842 Points

You don't put your CSS right next to your HTML. You could add it in one of 3 ways. You could either add it in a separate file, using a style="" attribute in your HTML, or include it in a <style></style> tag in the HTML. It's considered best practice to include it in a separate file, but I'll show you all of them below.

First, I'll show you the separate file:

Say you put your CSS in a separate file that is named "style.css". This is what that file would look like:

/* You can put all the CSS for your page in this file, but I'm going to use just your example */
footer{
    color: green;
}

You'll also need to tell your HTML to look for this file. You do this by using a <link/> tag in the <head></head> of your document. So, assuming your HTML looks like this (or something similar),:

<!DOCTYPE html>
<html>
<head>
    <!-- FYI: The next line is what tells your HTML to look for the CSS file, assuming the file is named "style.css", without the quotes, and it's in the same folder as this HTML file on your computer (or server.. Whichever you're running this from) -->
    <link rel="stylesheet" href="style.css" type="text/css"/>
</head>
<body>
    <footer>
        <p>Patti Nearing|Web Designer</p>
    </footer>
</body>
</html>

all text in your <footer></footer> will be green.

The next way I'll show is by using a <style></style> tag. This should usually be included in the <head></head> of the HTML. This will also turn all text in your <footer></footer> green:

<!DOCTYPE html>
<html>
<head>
    <!-- Inside the next tag is where the CSS goes, if you use this method -->
    <style>
        footer{
            color: green;
        }
    </style>
</head>
<body>
    <footer>
        <p>Patti Nearing|Web Designer</p>
    </footer>
</body>
</html>

Like I said, that will also turn all the text in the <footer></footer> green.

The final way you can use it is using a style="" attribute on every tag you want to style. The following will produce the same result as the other 2 examples:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <!-- Inside of the next tag will be where the style attribute will go, if you want to color all the text in your footer green -->
    <footer style="color: green">
        <p>Patti Nearing|Web Designer</p>
    </footer>
</body>
</html>

Even though all the examples I showed you do the same thing, it's best to use the first one (using a separate file), because you only have to write the CSS once for all the pages on your site, and you just have to <link/> to it in the <head></head> of each page. Also, if you ever want to make any changes to the code, you just have to change it in one place, instead of in potentially hundreds of documents individually. If you don't want to use that (although it's strongly recommended), the next best you could use is the second example. With this example, you have all your CSS all in one place, so it's easier to read, but you have to write it multiple times, and if you wanna change it, you'd have to do so on every page of your site individually. The worst way you could do it is the third way (style="" attribute on each styled element). This is the worst because not only is it hard to read, because it's not all in one place, it's tedious to write (Think of using this on lists.. You'd have to add a style="" attribute on each individual <li></li>, as opposed to the other 2, where you can just write it once), and you'd have to change it in every page on your site, if you wanted to make a change. It's also really hard to debug, because it's not all in one easy place.

Hope this helps!

I am trying to send a copy of my code and it is not working --

<!DOCTYPE html> <html> <head> <meta charset = "utf-8"> <title>Patti Nearing|Web Designer</title> <link rel="stylesheet" href="css/normalize.css"> <style> footer { color: green; }
</style>

Ok, here is my code, per instruction from teacher Nick. What is wrong ??

<!DOCTYPE html> <html> <head> <meta charset = "utf-8"> <title>Patti Nearing|Web Designer</title> <link rel="stylesheet" href="css/normalize.css"> <style> footer { color: green; }
</style>

Michael Hulet
Michael Hulet
47,842 Points

To get the special formatting for your code, like I did in my reply, you could wrap it in 3 backticks, and specify the language like this:

```html
<!-- Your code here -->

You'll also have to put 3 back ticks (it's on the same key as the tilde (~), next to the 1 on a standard American keyboard) after the code, but the Forum doesn't want to show that in my code, for some reason. You can see the Markdown Cheatsheet at the very bottom of the page (under the "Add an Answer" box) for more information

<code> <link rel="stylesheet" href="css/normalize.css"> <style> footer { color: green; }
</style>
</head> code>

Is this showing as code or english

Michael Hulet
Michael Hulet
47,842 Points

English at the moment, because you're trying to wrap it in a <code></code> tag. That method doesn't work. See my reply to your above comment, and check out the Markdown Cheatsheet at the very bottom of the page (under the "Add an Answer" box) for more information

Sorry, I just do not understand !!!!!

<link rel="stylesheet" href="css/normalize.css">
   <style>
     footer {
    color: green;
  }  
</style>    
</head> ```HTML
Michael Hulet
Michael Hulet
47,842 Points

That's good! Is that your entire HTML document?

like this ???

Michael Hulet
Michael Hulet
47,842 Points

Very close. You just need to use 3 backticks on each side of your code, instead of one. You can copy and paste this to get you started:

```html
<!-- Your code here -->

Just be sure to put 3 more backticks on a separate line after all of your code.

 <link rel="stylesheet" href="css/normalize.css">
   <style>
     footer {
    color: green;
  }  
</style>    
</head>

Ok, am I closer ???

Michael Hulet
Michael Hulet
47,842 Points

Closer, but I think I have an idea for a workaround.. If it works, you can copy and paste what's next:

```html

<!-- Paste all your code here -->

```

EDIT: It worked! Just copy and paste the above

 <link rel="stylesheet" href="css/normalize.css">
   <style>
     footer {
    color: green;
  }  
</style>    
</head>
Michael Hulet
Michael Hulet
47,842 Points

There you go. That's perfect. Is that your entire HTML document?

No, just this link. This is supposed to turn my copyright line green. Do you want the whole thing ???

Michael Hulet
Michael Hulet
47,842 Points

Yes, it'd be good to have the rest, because everything looks good there

Ok, My workspace is down for maintenance, I will load in a minute or so. You have been wonderful !!!

Michael Hulet
Michael Hulet
47,842 Points

It's no problem! Post it when you can get to it. I'm going to go to dinner in a few minutes, so it might be a couple hours before I respond, but I'll get back to you by the end of the night

Thank you, thank you, thank you !!!!!!I hope I get better at this stuff---- SOON !!!!

Michael Hulet
Michael Hulet
47,842 Points

It's no problem! It's really easy when you get the hang of it, and I'm sure that'll happen really soon

Michael, you were so helpful yesterday !! I need your help again ! I am at the same sectionof my code as when we left off, last night. I went into the value segment and wrote over the green to change it to orange. That is the ONLY thing I changed, but it did not change. I looked down my coding again toward the end. Is the html<footer> supposed to be there. If yes, then why won't my color value turn to orange ???

Michael Hulet
Michael Hulet
47,842 Points

<footer> is supposed to be there, as that's what you're changing.. Could you either post your code here again, or give me a link to the workspace you're using?

hang on a minute; Poo --- I put the html at the beginning and the at the end. Then I copy and paste, yes ?

```html<!DOCTYPE html> <html> <head> <meta charset = "utf-8"> <title>Patti Nearing|Web Designer</title> <link rel="stylesheet" href="css/normalize.css"> <style> footer { color: green; } footer { color: orange } </style>
</head> <body> <header> <a href="index.html"> <h1>Patti Nearing</h1> <h2>Designer</h2> </a> <nav> <ul> <li><a href="index.html">Portfolio</a> </li> <li><a href="about.html">About</a> </li>
<li><a href="contact.html">Contact </a> </li>
</ul> </nav>
</header> <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.</p>
    </a>
    </li>

    <li>     
    <a href="img/numbers-06.jpg">        
   <img src="img/numbers-06.jpg" alt="">
      <p>Trying 80's glow.</p>
      </a>
    </li>

    <li>
    <a href="img/numbers-09.jpg">        
   <img src="img/numbers-09.jpg" alt="">
      <p>playing with drips.</p>
      </a>
    </li>

    <li>       
   <a href="img/numbers-12.jpg">        
   <img src="img/numbers-12.jpg" alt=""> 
     <p>.</p>
      </a>         
  </li> 
  </ul>
</section>
 <footer>
  <a href="http://facebook.com/patti nearing">
  <img src="img/facebook-wrap.png" alt="facebook logo"></a>  

    <p>&copy; 2014 Patti Nearing.</p>
  </footer>

</body>

</html> </li> </ul> </section> ```

I forgot, I have to use the short-cut buttons on my keyboard !!!

Michael --- I forgot the ; after the color --- good grief !!!! Thanks

Michael Hulet
Michael Hulet
47,842 Points

It might not be the problem, but I immediately noticed that you forgot to put a semicolon after color: orange in your CSS. Add one, and tell me if it works

Thanks !!!

Hi Michael, I did not want to bother you, today. I am trying to get help from Kang and Saruna. you showed me the ```html trick to make my workspace code show up over here so we could work on it. What little code to I use for CSS --- copy paste does not seem to work, so what do I need ??? Ps the cheatsheet does not show me !! Just so you will know, I looked.

Michael Hulet
Michael Hulet
47,842 Points

Hey. Sorry I took forever to respond, as I was at a baseball game 2 hours away from my home with my family, and I just got home.

For any language you take on this site, you can post code on the forum using the same template I showed you, but you just specify the language in lowercase letters where you would usually write html right after the first 3 backticks. So, for CSS, it would look something like this:

```css

/* Paste all your CSS here */

```

Michael I got your e-mail. Thanks !!. How do I in touch with you for when I have more questions?? Right now, on my most recent post, I am waiting for Marcelo.
I did what you said with the ``` and my code is now visible in the correct format.

Michael Hulet
Michael Hulet
47,842 Points

Great! I'm glad I could help. If you have any more questions at all (I've completed the Web Design and Front-End Web Development track, and I'm towards the end of the Rails Development track), you can email me directly at bestraysfan@me.com

Michael got your answer, Thank you !!! I did post a question hours ago, today. Under CSS --- I still need help with main.css. Maybe you could check it for me, cause I have not gotten an answer from Marcelo in many hours !!??!!

Michael Hulet
Michael Hulet
47,842 Points

I just looked at it. What exactly is the problem you're trying to resolve? Also, could you post a link to the video you're watching?

<!DOCTYPE html>
<html>
    <head>
      <meta charset = "utf-8">
     <title>Patti Nearing|Web Designer</title>
  ```html <link rel="stylesheet" href="css/normalize.css">
   <style>
     footer {
    color: green;
  }  
</style>    
</head>
  ```html
<body>
  <header>
  <a href="index.html">
    <h1>Patti Nearing</h1>
    <h2>Designer</h2>
    </a>
    <nav>
      <ul>
        <li><a href="index.html">Portfolio</a>
        </li>
        <li><a href="about.html">About</a>
        </li>        
        <li><a href="contact.html">Contact
          </a>
        </li>    
      </ul>
      </nav>     
    </header>
    <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.</p>
        </a>
        </li>

        <li>     
        <a href="img/numbers-06.jpg">        
       <img src="img/numbers-06.jpg" alt="">
          <p>Trying 80's glow.</p>
          </a>
        </li>

        <li>
        <a href="img/numbers-09.jpg">        
       <img src="img/numbers-09.jpg" alt="">
          <p>playing with drips.</p>
          </a>
        </li>

        <li>       
       <a href="img/numbers-12.jpg">        
       <img src="img/numbers-12.jpg" alt=""> 
         <p>.</p>
          </a>         
      </li> 
      </ul>
    </section>
     <footer>
      <a href="http://facebook.com/patti nearing">
      <img src="img/facebook-wrap.png" alt="facebook logo"></a>
    </footer>

        <p>&copy; 2014 Patti Nearing.</p>
      </footer>

    </body>
  </html>
</li>
      </ul>
      </section> 
Michael Hulet
Michael Hulet
47,842 Points

Okay, I think I found the problem. Besides a few semantic things that I probably caused trying to help you with formatting, you closed your <footer></footer> twice. If you paste the following over all your work so far, it'll successfully change the text in your footer (<p>&copy; 2014 Patti Nearing.</p>) green:

<!DOCTYPE html>
<html>
  <head>
    <meta charset = "utf-8">
    <title>Patti Nearing|Web Designer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <style>
      footer {
        color: green;
      } 
    </style>    
  </head>
<body>
  <header>
    <a href="index.html">
      <h1>Patti Nearing</h1>
      <h2>Designer</h2>
    </a>
    <nav>
      <ul>
        <li><a href="index.html">Portfolio</a></li>
        <li><a href="about.html">About</a></li>        
        <li><a href="contact.html">Contact</a></li>    
      </ul>
    </nav>     
  </header>
  <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.</p>
        </a>
      </li>
      <li>     
        <a href="img/numbers-06.jpg">        
          <img src="img/numbers-06.jpg" alt="">
          <p>Trying 80's glow.</p>
        </a>
      </li>
      <li>
        <a href="img/numbers-09.jpg">        
          <img src="img/numbers-09.jpg" alt="">
          <p>playing with drips.</p>
        </a>
      </li>
      <li>       
        <a href="img/numbers-12.jpg">        
          <img src="img/numbers-12.jpg" alt=""> 
          <p>.</p>
        </a>         
      </li> 
    </ul>
  </section>
  <footer>
    <a href="http://facebook.com/patti nearing"><img src="img/facebook-wrap.png" alt="facebook logo"></a>
    <p>&copy; 2014 Patti Nearing.</p>
  </footer>
</body>
</html>