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

Posted by Oğulcan Girginc
Oğulcan Girginc
24,848 Points

How to add ID correctly to have different colours?

Hi, I want to make <> and p different colours in <p>. I tried both;

<li id="left-bracket">&lt<id="prgh">p<id="right-bracket">&gt</li>

and

<li id="left-bracket">&lt</li>
<li id="prgh">p</li>
<li id="right-bracket">&gt</li>

My CSS is;

li #left-bracket #right-bracket{
    list-style: none;
    color: red
}

li #prgh {
    color: black;
}

but couldn't make brackets red and p black in my first code. They ended up same colours. In my second example it outputs like:

<

p

>

but I want it to be like: 

<p>

Is it my HTML or CSS?

1 Answer

mikes02
mikes02
Courses Plus Student 16,968 Points

I know you're probably just testing things out, which is great, but for styling multiple li elements you may want to consider the use of classes instead of unique IDs. With that said, your code is not working because of the way you are referencing the IDs, if you are going to use an element selector, in this case the li in combination with the ID there cannot be a space between them, and you need a comma separator if you are declaring multiple IDs, like so:

li#left-bracket, li#right-bracket{
    list-style: none;
    color: red
}

li#prgh {
    color: black;
}

or without the li element selector you could do just:

#left-bracket, #right-bracket{
    list-style: none;
    color: red
}

#prgh {
    color: black;
}

Also, the HTML in your first example is invalid because you are treating ID as it's own HTML element which it is not, for something like that you'd probably want to use a SPAN and do:

<span id="left-bracket">Test</span>
Oğulcan Girginc
Oğulcan Girginc
24,848 Points

Hi mikes02

Yep I am just testing! :) Thanks!

Oğulcan Girginc
Oğulcan Girginc
24,848 Points

Hi mikes02

Sorry to bother you but wouldn't this would be "better practice"?:

<span class="paragraph_tag">
      <span id="left-bracket">&lt</span>
      <span id="prgh">p</span>
      <span id="right-bracket">&gt</span>
</span>
mikes02
mikes02
Courses Plus Student 16,968 Points

It really depends on what you are trying to accomplish, by looking at your code I can't really tell what you're going for, but if you want a paragraph then semantically speaking you should be using the p tag, not a span.

Oğulcan Girginc
Oğulcan Girginc
24,848 Points

I am trying to recreate this (at much more basic level) :)