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 How to Make a Website Customizing Colors and Fonts Use Classes in CSS

Natalia P.
Natalia P.
353 Points
Posted by Natalia P.
Natalia P.
353 Points

Changing color of text in HTML and selectors

Hi,

I am wondering why I can change the color of text in paragraph elements <p> by typing a rule like this in css:

<p>supergirl</P>

p { color: #212121 }

(the above will change supergirl to that color)

but I cannot change the color in an element if it has a <li> tag?

<li><a href="about.html">About</a></li>

li { color: #123123 }

(the above will not change "about" to another color, I have to use the "a" selector to change that).

Is it because "li" does not refer to any text, but, rather it is an ordering system of some sort?

The only thing which changed was the bullet points changed color. However, only bullet points show up when the list is for images, not for text when using the <li> tag to make an unordered list.

Thanks!

2 Answers

Pol Martin
Pol Martin
8,200 Points
Pol Martin
Pol Martin
8,200 Points

Hi Natalia,

I imagine based on your explanation that you have some code like this:

<ul>
  <li>
    <a href="">About</a>
  </li>
</ul>

What's happening here is that your browser ( Chrome, Firefox, Safari, ... ) has some default styles in order to render html.

In the case of <a> tags, the browser renders them underlined and usually blue by default. For <li> tags, by default browsers render them with a black dot in front of every <li> item.

This default styles will only change if you change them specifically in your own CSS.

So in your example you tell the browser to render the <li> tag of color '#123123', and it does (hence the dot changing color), but since the 'About' text is ultimately wrapped inside the <a> tag, it will remain in the default style.

To clear things out, check that for example if you had <p> tags inside the <li> instead of <a>:

<ul>
  <li>
    <p>About</p>
  </li>
</ul>

your CSS would have worked as you expected because <p> tags aren't rendered in a specific color by the browser:

Natalia P.
Natalia P.
353 Points
Natalia P.
Natalia P.
353 Points

THanks for the idea. I am playing around with changing tags on html to see what happens with the color value. Thanks again Pol.

Natalia in Madison, WI.

Muhammad Mohsen
PLUS
Muhammad Mohsen
Courses Plus Student 10,843 Points
Muhammad Mohsen
Muhammad Mohsen
Courses Plus Student 10,843 Points

If you have an a tag inside li tag, so yes you need to target the a tag ofcourse to change its color.

But if you have your text directly inside li tag, so li { color: red; } will change the text color.