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
Patti Nearing
696 PointsWhat 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 ??
Patti Nearing
696 Points<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
Patti Nearing
696 PointsYup, it worked !!! Oh good grief !!!!
Michael Hulet
47,912 PointsComputers are picky, and even the best of us make tiny oversights like that all the time. Post here if you need any more help
Dustin Scott
Courses Plus Student 7,819 PointsProbably 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
47,912 PointsTo 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
Patti Nearing
696 Points<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.
Dustin Scott
Courses Plus Student 7,819 PointsOkay if you want the link to turn green select the a not the footer
Patti Nearing
696 Points<code> <link rel="stylesheet" href="css/normalize.css">
<style>
footer {
color: green; }
</style>
</code>
Michael Hulet
47,912 PointsYou 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!
Patti Nearing
696 PointsI 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 ??
Patti Nearing
696 Points<!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
47,912 PointsTo 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
Patti Nearing
696 Points<code>
<link rel="stylesheet" href="css/normalize.css">
<style> footer {
color: green;
}
</style>
</head>
code>
Is this showing as code or english
Michael Hulet
47,912 PointsEnglish 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
Patti Nearing
696 PointsSorry, I just do not understand !!!!!
Patti Nearing
696 Points<link rel="stylesheet" href="css/normalize.css">
<style>
footer {
color: green;
}
</style>
</head> ```HTML
Michael Hulet
47,912 PointsThat's good! Is that your entire HTML document?
Patti Nearing
696 Pointslike this ???
Michael Hulet
47,912 PointsVery 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.
Patti Nearing
696 Points <link rel="stylesheet" href="css/normalize.css">
<style>
footer {
color: green;
}
</style>
</head>
Ok, am I closer ???
Michael Hulet
47,912 PointsCloser, 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
Patti Nearing
696 Points <link rel="stylesheet" href="css/normalize.css">
<style>
footer {
color: green;
}
</style>
</head>
Michael Hulet
47,912 PointsThere you go. That's perfect. Is that your entire HTML document?
Patti Nearing
696 PointsNo, just this link. This is supposed to turn my copyright line green. Do you want the whole thing ???
Michael Hulet
47,912 PointsYes, it'd be good to have the rest, because everything looks good there
Patti Nearing
696 PointsOk, My workspace is down for maintenance, I will load in a minute or so. You have been wonderful !!!
Michael Hulet
47,912 PointsIt'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
Patti Nearing
696 PointsThank you, thank you, thank you !!!!!!I hope I get better at this stuff---- SOON !!!!
Michael Hulet
47,912 PointsIt's no problem! It's really easy when you get the hang of it, and I'm sure that'll happen really soon
Patti Nearing
696 PointsMichael, 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
47,912 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?
Patti Nearing
696 Pointshang on a minute; Poo --- I put the html at the beginning and the at the end. Then I copy and paste, yes ?
Patti Nearing
696 Points```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>© 2014 Patti Nearing.</p>
</footer>
</body>
</html> </li> </ul> </section> ```
I forgot, I have to use the short-cut buttons on my keyboard !!!
Patti Nearing
696 PointsMichael --- I forgot the ; after the color --- good grief !!!! Thanks
Michael Hulet
47,912 PointsIt 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
Patti Nearing
696 PointsThanks !!!
Michael Hulet
47,912 PointsIt's no problem at all
Patti Nearing
696 PointsHi 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
47,912 PointsHey. 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 */
```
Patti Nearing
696 PointsMichael
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
47,912 PointsGreat! 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
Patti Nearing
696 PointsMichael 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
47,912 PointsI 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?
Patti Nearing
696 Points<!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>© 2014 Patti Nearing.</p>
</footer>
</body>
</html>
</li>
</ul>
</section>
Michael Hulet
47,912 PointsOkay, 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>© 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>© 2014 Patti Nearing.</p>
</footer>
</body>
</html>
Dustin Scott
Courses Plus Student 7,819 PointsDustin Scott
Courses Plus Student 7,819 PointsCould you include your code