How to Change the Color of the Text on Your Web Page

We used to add some color to our pages with the <font> tag, but since that tag has been deprecated, we need to use CSS to change the color.

Since CSS can be put inline, we could just add it to the style attribute of many of the HTML tags like this:

<p style="color: red">My Red Text</p>

OR

<h1 style="color: red">My Red Text</h1>

My Red Text

If you don’t really have a tag around the text, or if you want only part of the text in the innermost tag around the text to change colors, you can use the span tag:

<p>My text with only <span style="color:red">part</span> of the text a different color</p>

My text with only part of the text a different color

If you want to make all paragraphs the same color, you could add a style section to your web page. The style section is usually inside your <head> section.

<style>
  p { color:red }
</style>

Of course, I can add a class if I want to pick and choose which paragraphs will be a different color:

<style>
   .red { color: red }
</style>

<p>Regular color</p>
<p class="red">Red text here</p>

If I have several web pages that need to use the same CSS, I can, of course, link to an external style sheet that has the CSS code I want to use on my page. This keeps me from having to add the styles in each page.

I can also change the color to something besides red. You can use several color names like I have used ‘red’ above, such as green, coral, aqua and many more. But, most of the time you will see a hex code instead of the color name. Hex codes look like this: #F0F8FF. White is #FFFFFF and black is #000000. (The period is not part of the code and those are zeros, not the letter o). Hex codes that have the same digit in all 6 places are different shades of gray – #333333 or #999999. If I used a hex code instead of the color name, my CSS code would look like this:

<style>
   .red { color: #FF0000 }
</style>

There are 16 million different colors that you can use, so using the hex code is a little easier than trying to hit the correct color with a name. To find the hex code for a color, there are color tools in most graphic software such as photoshop. Mac computers have a digital color tool built-in. There may be a similar tool on Windows. You can also find the codes by seaching for ‘CSS colors’ online.

Let me know if you have any questions or comments! I value your feedback!

3 thoughts on “How to Change the Color of the Text on Your Web Page”

  1. Do you know if three digit hex is still standards compliant? I don’t use it personally, but I see #FFF a lot.

    Also, you mentioned on your other blog to look for an appropriate RSS feed, but I don’t see a link here. Is the Meta links section missing?

    – Jonathan

  2. Hi Jonathan!

    If I understand correctly, the CSS standard allows the three digit hex code, but the html standard does not. So, if you use the three digit hex code inline, some browsers may not interpret it correctly. Assuming that’s true, it’s safer to use the six digit hex code. But, if you like to take risks, the three digit code will work in most cases ๐Ÿ™‚

    You should be able to get to the rss feeds from your browser address bar, but I suppose some browsers may not support it up there, so I’ll add in the meta tags on the sidebar.

    If you are only interested in receiving the rss feed to certain categories or tags, you can click on the category or tag in the sidebar and then the little rss link in the browser address bar will often give you an option of choosing just the category or tag feed as well.

    Thanks for being such a faithful follower to all my blogs – even when I don’t continue to keep them up to date ๐Ÿ™‚ I’m really trying to commit to the post per day with this one. Even scheduling several ahead in case I get too busy.

    Cindy

    1. I just went to the standard WordPress feed URL, and subscribed that way. But, I figure most people won’t look that hard, so I mentioned it in hopes that others will be subscribing. ๐Ÿ™‚ Sounds like this once a day posting may actually happen!

      Thanks for the clarification on 3 digit hex. I was thinking everything was going to 6, but that makes sense.

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top