Skip to main content
almarefa.net

Back to all posts

How to Add Color to Some Words In A Text In HTML?

Published on
3 min read
How to Add Color to Some Words In A Text In HTML? image

Best HTML Text Color Tools to Buy in September 2025

+
ONE MORE?

In HTML, you can add color to specific words or phrases within a text by using the <span> element along with the style attribute. Here's how you can achieve this:

In the above example, the <p> element represents a paragraph of text. The words "red" and "blue" will be displayed in their respective colors. You can replace these colors with any valid CSS color values such as color names, hexadecimal codes, RGB values, etc.

You can also add multiple styling properties within the style attribute. For example:

In this case, the word "bold red" will be displayed in both bold and red color.

Remember to enclose the targeted words or phrases within the <span> element so that the specified styles only apply to that specific portion of the text.

How to specify color using HTML color names?

To specify a color using HTML color names, follow these steps:

  1. Open an HTML document or any text editor where you write your HTML code.

  2. Identify the element or text you want to apply a color to.

  3. Decide on a color name from the HTML color names list. Some examples include "red," "blue," "green," "yellow," "orange," "pink," etc.

  4. Insert the CSS style attribute within the relevant HTML tag to specify the color. For example:

    This is a red heading

    In this example, the style attribute color is used to set the text color as red for the

    heading element.

  5. Save the HTML document and open it in a web browser. The specified color should be reflected on the element or text you applied it to.

Remember to use valid HTML syntax and ensure that the style attribute is enclosed within double quotes ("") and followed by a semicolon (;) after the color name.

What is the default font color in HTML?

The default font color in HTML is typically black (#000000).

How to underline text in HTML?

To underline text in HTML, you can use the tag. Here's an example of how to do it:

In this example, the tag is used to underline the word "underlined".

What is the tag used for in HTML?

In HTML, the <tag> is used to define elements on a webpage. Tags are placed within angle brackets and can have attributes to provide additional information about the elements. For example, the <p> tag is used to define a paragraph, the <h1> to <h6> tags are used to define headings, the <a> tag is used to create a link, and so on.