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 trialDervin Buckery
Courses Plus Student 838 PointsHave some trouble with the font color of headers
I was playing around with the code in the workspace. I decided to make a website of pros and cons of one of my friend's. I've added 2 extras headers for the pros and cons sections. Okay so my probable is the fonts for the 2 headers I added are coming out black when I assigned a color for each. I've posted my code below can anyone see where my issue would've occurred?
<!--This is my story, but you should insert your own story below. Use the <p> tag to start a new paragraph and </p> at the end of each paragraph.--> <!DOCTYPE html> <html> <head>
<title>Ky's Traits </title> <meta charset="utf-8">
<style> h1 {text-align: center; color: grey} h2 {text-align: center; color: black} h3 {text-align: left; color red} h3 {text-align: left; color green} </style>
</head>
<body> <h1>Ky's Pros and Cons</h1> <h2>A Project Created by Dervin</h2> <h3> Cons of Ky</h3>
<p>1) Ky is frequently late to work. 2) Ky Ky is always late to class. 3) Ky never admits when she is wrong.</p>
<h3> Pros of Ky</h3>
<p>pros of ky goes here</p>
</body> </html>
2 Answers
Steven Parker
231,126 PointsThe reason you are not seeing the color on the h3's is that you omitted the colon after the word "color" in the h3 rules.
Note that having two h3 rules will not cause an error, but only the settings in the last one will be seen.
Benjamin's suggestion about adding a colon after the last property value in the rule is optional, but considered a "best practice" and would be a good habit to develop.
benjaminnaesen
2,349 PointsThanks for clearing that up, Steven. :)
Dervin Buckery
Courses Plus Student 838 PointsYeah I was looking over some code that was already in the workspace that was correct and working .. As I was comparing it to the code I've wore I noticed I missed the colon .. Also I did notice the color the h3 colors was the same. Is it possible to have the same size headers with different colors?
benjaminnaesen
2,349 PointsYes, Dervin. That is possible. You can use classes to do so. I'm sure you'll learn that soon in one of the upcoming classes.
Example:
<h3>Bob</h3>
<h3 class="redHeader">Josh</h3>
h3 {
text-align: left;
color: red;
}
.redHeader {
color: blue;
}
Bob will be red. Josh will be blue.
Steven Parker
231,126 PointsSure, there are several ways to do this, which will all be shown in more advanced courses. But just for a preview, let's say without making any changes to the HTML, you wanted the first h3 to be red and the others green (and all of them left aligned):
h3 { text-align: left; color: green; }
h3:first-of-type { color: red; }
Dervin Buckery
Courses Plus Student 838 PointsOkay .. Thanks for the help!
benjaminnaesen
2,349 Pointsbenjaminnaesen
2,349 PointsYou forgot : in h3.
Should be
You need to make sure you close every singly line of CSS styling well as best practice too.
You wrote:
color: grey
It should be:
color: grey;
CREDITS: Steven Parker