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 CSS Foundations Selectors Type Selectors

Charles Harpke
Charles Harpke
33,986 Points

<h1> <span>

I'm wondering why the 'CSS selectors' isn't rendering red inside of my h1 tag? As well as a black color inside of my p tag? Is my syntax off?

here is my code: <!DOCTYPE.html> <html> <head> <title>CSS Selectors</title> <link rel="stylesheet" href="css/style.css">

</head> <body> <h1>Learning About <span>CSS Selectors</span></h1> <p> <span>Lorem ipsum sit amet, consectetur, adipiscing elit, Nullam Quis Tristique magna.</span> Hai gi ainta la coausa cosa sento in qual laccoi cadea perfidi io voglio io voglio di tal modo punirvi ah pia cer mio la sentenza sa ra. ma se pegasse la vecchia pretendente pargarla in qual manietra. E poi anotnio che all in cognito rucusa di dare unani pote in matrimonio </p>

<h2>Selectors match <span>HTML elements</span></h2> 


<p>
Avant de quitter ces lieux sol natal de mesieux ah toi seigneur et roi des cieux.
ma xoeur je confiee.    
</p>    

<p>
    Bella siccome un angelo in tera pella grino fresca siccome il giglio che sa pre sulmatino.
</p>    

</body>
</html>

and my css:

body { background-color: #cadde5; padding: 40px;

}

h1 { color: #2980b9; font-size: 40px;

}

h2 { color: #e74c3c;

}

p{ color: white; padding: 10px; background-color: #4b8bc1;

h1 span {
    color: #FF0000;

}

p span {
    color: black;
    font-weight: bold;

}

Charles, sometimes if your code isn't correctly posted, certain parts get cut off or it renders incorrectly. Others will have a much easier time trying to help you if it's done correctly. For more information check this link out and the image below for further clarity. Remember, on the line before your code you're going to have 3 backticks and then the language, followed by 3 backticks at the bottom of your code to close it off.

Posting Code to Treehouse

6 Answers

Tom Bedford
Tom Bedford
15,645 Points

Hi Charles, you have an open set of curly brackets on the styles for the p tag so none of the rules below it will work correctly.

You need to add the end curly bracket here:

p{
    color: white;
    padding: 10px;
    background-color: #4b8bc1;
}  /* the curly bracket on this line is missing */

You don't have a h1 in your html instead its a h2 this may be the problem

It looks like you were missing a curly brace to close your first p selector. Also, the period you have between <!DOCTYPE"."html> is not needed and is causing some slightly different rendering.

body {
    background-color: #cadde5;
    padding: 40px;
}

h1 {
    color: #2980b9;
    font-size: 40px;
}

h2 {
    color: #e74c3c;
}

p {
    color: white;
    padding: 10px;
    background-color: #4b8bc1;
}

h1 span {
    color: #ff0000;
}

p span {
    color: black;
    font-weight: bold;
}
Charles Harpke
Charles Harpke
33,986 Points

my h1 is: <h1>Learning About <span>CSS Selectors</span></h1>

In the question you posted it doesn't actually show it in an html element but you've done h1 span this would target a span element inside the h1 meaning that your not directly targeting the h1 rather your targeting the span element i would suggest just doing

/*Default styling*/
h1 { color:#ff0000;}
/*Overide anything inside styling example*/
h1 span { color:blue;} 

This targets the h1 and then anything inside a span is targeted as well but the styles are overridden hope this helps

Charles Harpke
Charles Harpke
33,986 Points

Sorry guys...my code posted incomplete...

<!DOCTYPE.html>
<html>
<head>
    <title>CSS Selectors</title>
    <link rel="stylesheet" href="css/style.css">

</head>
<body>
    <h1>Learning About <span>CSS Selectors</span></h1>
    <p>
        <span>Lorem ipsum sit amet, consectetur, adipiscing elit, Nullam Quis Tristique magna.</span>
        Hai gi ainta la coausa cosa sento in qual laccoi cadea perfidi io voglio io voglio di tal modo punirvi ah pia cer mio la sentenza
        sa ra. ma se pegasse la vecchia pretendente pargarla in qual manietra.  E poi anotnio che all in cognito rucusa di dare unani pote in matrimonio
        </p>

    <h2>Selectors match <span>HTML elements</span></h2> 


    <p>
    Avant de quitter ces lieux sol natal de mesieux ah toi seigneur et roi des cieux.
    ma xoeur je confiee.    
    </p>    

    <p>
        Bella siccome un angelo in tera pella grino fresca siccome il giglio che sa pre sulmatino.
    </p>    
</body>     
</html>     
body {
    background-color: #cadde5;
    padding: 40px;

}

h1 {
    color: #2980b9;
    font-size: 40px;

}

h2 {
    color: #e74c3c;

}

p{
    color: white;
    padding: 10px;
    background-color: #4b8bc1;



    h1 span { color: #ff0000;

    }

    p span {
        color: black;
        font-weight: bold;
    }```


Wondering why the span element inside of h1 doesn't render red? As well as the span element inside of <p> not rendering black......