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

WordPress

Posted by Lynton Swartz
Lynton Swartz
523 Points

Need to change the color of a line of text inside a div

Hey everyone, I am learning css from the ground up.

Currently I am trying to change the color of some text to the side of my navbar, I can't figure out how to specifically select the line of text in order to change its color.

On the page linked here: http://testbox.mattipcodev.co.za/wp/

You will see two numbers in orange Tel: 083 677 0555 Cell: 083 677 0555

I cant figure out how to change the colors on just those two numbers, any advice?

2 Answers

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,253 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

Hi There Lynton,

To work out which Selector to use, you can use Chrome Dev Tools to inspect the element and identify the element used.

I can see you're using an anchor element to surround it. To be able to select just those anchor elements and no others, you could give those elements a class.

<a class="body2" href="tel:083 677 0555">

Like you've done for the Cellphone number.

Then select it with the following, in your style.css file for your active theme.

a.body2{
  color: blue;
}

You'll need to add the same class to the other phone number too.

Lynton Swartz
Lynton Swartz
523 Points

Exactly what I needed to know thanks a lot Jonathan! :)

Codin - Codesmite
Codin - Codesmite
8,600 Points
Codin - Codesmite
Codin - Codesmite
8,600 Points

They are inheriting their colour from your styling on anchor elements in your css file

a {
    color: #D65050;
}

You can either find where in the stylesheet your anchor styling is and change the colour there, or you could apply a seperate style to your anchor tag like this for example:

<a href="yourLink" class="yourClass" ></a>

.yourClass {
    color: #FFF;
}

Dont forget stylesheets are cascading and if your anchor styling is after your class it will overide it.