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

9 minutes read

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:

1
2
3
4
<p>
  This is a <span style="color: red;">red</span> text. 
  This is a <span style="color: blue;">blue</span> text.
</p>


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:

1
2
3
<p>
  This is a <span style="color: red; font-weight: bold;">bold red</span> text.
</p>


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.

Best HTML & CSS Books to Read in 2024

1
Web Design with HTML, CSS, JavaScript and jQuery Set

Rating is 5 out of 5

Web Design with HTML, CSS, JavaScript and jQuery Set

2
HTML and CSS QuickStart Guide: The Simplified Beginners Guide to Developing a Strong Coding Foundation, Building Responsive Websites, and Mastering ... Web Design (QuickStart Guides™ - Technology)

Rating is 4.9 out of 5

HTML and CSS QuickStart Guide: The Simplified Beginners Guide to Developing a Strong Coding Foundation, Building Responsive Websites, and Mastering ... Web Design (QuickStart Guides™ - Technology)

3
HTML, CSS, and JavaScript All in One: Covering HTML5, CSS3, and ES6, Sams Teach Yourself

Rating is 4.8 out of 5

HTML, CSS, and JavaScript All in One: Covering HTML5, CSS3, and ES6, Sams Teach Yourself

4
Head First HTML and CSS: A Learner's Guide to Creating Standards-Based Web Pages

Rating is 4.7 out of 5

Head First HTML and CSS: A Learner's Guide to Creating Standards-Based Web Pages

5
HTML, CSS & JavaScript in easy steps

Rating is 4.6 out of 5

HTML, CSS & JavaScript in easy steps

6
HTML and CSS: Visual QuickStart Guide

Rating is 4.5 out of 5

HTML and CSS: Visual QuickStart Guide

7
HTML & CSS: The Complete Reference, Fifth Edition (Complete Reference Series)

Rating is 4.4 out of 5

HTML & CSS: The Complete Reference, Fifth Edition (Complete Reference Series)

8
Beginning HTML and CSS

Rating is 4.3 out of 5

Beginning HTML and CSS

9
HTML, XHTML and CSS For Dummies

Rating is 4.2 out of 5

HTML, XHTML and CSS For Dummies

10
HTML & CSS: The Good Parts: Better Ways to Build Websites That Work (Animal Guide)

Rating is 4.1 out of 5

HTML & CSS: The Good Parts: Better Ways to Build Websites That Work (Animal Guide)


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:

1
<p>This is <u>underlined</u> text.</p>


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.

Facebook Twitter LinkedIn Whatsapp Pocket

Related Posts:

To set the background color in CSS, you can use the &#34;background-color&#34; property. The value of this property can be specified using different color representations like color names, hexadecimal codes, RGB values, or HSL values.Color names are predefined...
To have multiple color elements in an HTML5 canvas, you can use the fillStyle property of the canvas context. The fillStyle property sets or returns the color, gradient, or pattern used to fill shapes in the canvas.To set a specific color, you can use a color ...
To style links in CSS, you can use the following properties:color: Determines the color of the link text. Example: a { color: blue; } text-decoration: Controls the decoration of the link, such as underlining. Example: a { text-decoration: none; } font-weig...