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

CSS CSS Foundations Selectors Type Selectors

Charles Harpke
Charles Harpke
33,986 Points
Posted by 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;

}
Dustin Matlock
Dustin Matlock
33,856 Points

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
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 */
Tunde Adegoroye
Tunde Adegoroye
20,597 Points
Tunde Adegoroye
Tunde Adegoroye
20,597 Points

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

Dustin Matlock
Dustin Matlock
33,856 Points
Dustin Matlock
Dustin Matlock
33,856 Points

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
Charles Harpke
Charles Harpke
33,986 Points

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

Tunde Adegoroye
Tunde Adegoroye
20,597 Points

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