Home >Web Front-end >CSS Tutorial >How can I change the color of specific words within an HTML text string?

How can I change the color of specific words within an HTML text string?

Patricia ArquetteOriginal: 2024-11-16 00:48:02215browse

Changing Colors of Specific Words in HTML Text

To alter the color of specific words within a string of text in HTML, you can utilize inline CSS or CSS classes.

Inline CSS:

<p>  Enter the competition by <br>  <span>  and you could win up to $$$$ — including amazing <br>  <span>  trips!<br></p><br>

This approach adds a span element around the words you want to color differently and applies the color style to that span.

CSS Classes:

Alternatively, you can define CSS classes:

<html><br>  <head></p>
<pre class="brush:php;toolbar:false"><style type="text/css">
  p { 
    font-size:14px; 
    color:#538b01; 
    font-weight:bold; 
    font-style:italic;
  }
  .date {
    color: #ff0000;
  }
  .season { /* Contrived example... */
    color: #0000a0;
  }
</style>

<p>
  Enter the competition by 
  <span>

This method involves creating CSS rules for the desired colors, assigning those rules to specific classes, and then applying those classes to the text you want to style.

The above is the detailed content of How can I change the color of specific words within an HTML text string?. For more information, please follow other related articles on the PHP Chinese website!

css html String define for this

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How can you emulate the behavior of CSS pseudo-classes like :hover using jQuery?Next article：How can you emulate the behavior of CSS pseudo-classes like :hover using jQuery?

See more

How can I change the color of specific words within an HTML text string?

Related articles