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

HTML Treehouse Club: HTML Publish a Story Introduction to Workspaces

Posted by Dervin Buckery
Dervin Buckery
Courses Plus Student 838 Points

Have 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>

benjaminnaesen
benjaminnaesen
2,349 Points

You forgot : in h3.

        h3 {
            text-align: left;
            color red
        }

Should be

        h3 {
            text-align: left;
            color: red;
        }

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

2 Answers

Steven Parker
Steven Parker
231,248 Points
Steven Parker
Steven Parker
231,248 Points

The 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
benjaminnaesen
2,349 Points

Thanks for clearing that up, Steven. :)

Dervin Buckery
Dervin Buckery
Courses Plus Student 838 Points

Yeah 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
benjaminnaesen
2,349 Points

Yes, 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
Steven Parker
231,248 Points
Steven Parker
Steven Parker
231,248 Points

Sure, 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
PLUS
Dervin Buckery
Courses Plus Student 838 Points
Dervin Buckery
Dervin Buckery
Courses Plus Student 838 Points

Okay .. Thanks for the help!