HTML: Changing Colors Of Specific Words In A String Of Text

Trang chủ » Html Color Text Inline » HTML: Changing Colors Of Specific Words In A String Of Text

Có thể bạn quan tâm

    1. Home
    2. Questions
    3. Tags
    4. Users
    5. Companies
    6. Labs
    7. Jobs
    8. Discussions
    9. Collectives

    10. Communities for your favorite technologies. Explore all Collectives

  2. Teams

    Ask questions, find answers and collaborate at work with Stack Overflow for Teams.

    Try Teams for free Explore Teams
  3. Teams

  4. Ask questions, find answers and collaborate at work with Stack Overflow for Teams. Explore Teams

Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Learn more about Collectives

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Learn more about Teams

Get early access and see previews of new features.

Learn more about Labs HTML: Changing colors of specific words in a string of text Ask Question Asked 13 years, 11 months ago Modified 2 years, 8 months ago Viewed 838k times 150

I have the below message (slightly changed):

"Enter the competition by January 30, 2011 and you could win up to $$$$ — including amazing summer trips!"

I currently have:

<p style="font-size:14px; color:#538b01; font-weight:bold; font-style:italic;">

formatting the text string, but want to change the color of "January 30, 2011" to #FF0000 and "summer" to #0000A0.

How do I do this strictly with HTML or inline CSS?

  • html
  • css
  • text
  • colors
  • inline
Share Improve this question Follow edited Jun 28, 2016 at 15:35 Sam R.'s user avatar Sam R. 16.4k14 gold badges72 silver badges125 bronze badges asked Jan 7, 2011 at 5:38 Mitch's user avatar MitchMitch 1,5012 gold badges9 silver badges3 bronze badges Add a comment |

8 Answers 8

Sorted by: Reset to default Highest score (default) Trending (recent votes count more) Date modified (newest first) Date created (oldest first) 200 <p style="font-size:14px; color:#538b01; font-weight:bold; font-style:italic;"> Enter the competition by <span style="color: #ff0000">January 30, 2011</span> and you could win up to $$$$ — including amazing <span style="color: #0000a0">summer</span> trips! </p>

Or you may want to use CSS classes instead:

<html> <head> <style type="text/css"> p { font-size:14px; color:#538b01; font-weight:bold; font-style:italic; } .date { color: #ff0000; } .season { /* OK, a bit contrived... */ color: #0000a0; } </style> </head> <body> <p> Enter the competition by <span class="date">January 30, 2011</span> and you could win up to $$$$ — including amazing <span class="season">summer</span> trips! </p> </body> </html> Share Improve this answer Follow answered Jan 7, 2011 at 5:41 Jacob's user avatar JacobJacob 78.8k24 gold badges153 silver badges241 bronze badges 3
  • 1 This is a great answer! Easily demonstrates that the dots represent tags inside the paragraph tags. It really clarifies this information for anyone working with <style>. – MERLIN Commented Mar 19, 2019 at 20:41
  • Can this be done based on the index of the string? I mean like from character x to character y, how can I color it? – Debjyoti Banerjee Commented Nov 17, 2021 at 11:54
  • 1 @DebjyotiBanerjee you cannot style text nodes with CSS, only elements. The only way to modify each character's color is to wrap each character in its own element, like with <span/>. – Jacob Commented Nov 17, 2021 at 17:34
Add a comment | 72

You could use the HTML5 Tag <mark>:

<p>Enter the competition by <mark class="red">January 30, 2011</mark> and you could win up to $$$$ — including amazing <mark class="blue">summer</mark> trips!</p>

And use this in the CSS:

p { font-size:14px; color:#538b01; font-weight:bold; font-style:italic; } mark.red { color:#ff0000; background: none; } mark.blue { color:#0000A0; background: none; }

The tag <mark> has a default background color... at least in Chrome.

Share Improve this answer Follow edited Jan 16, 2022 at 9:31 bad_coder's user avatar bad_coder 12.8k20 gold badges53 silver badges88 bronze badges answered Dec 14, 2012 at 23:58 Juan Pablo Pinedo's user avatar Juan Pablo PinedoJuan Pablo Pinedo 7036 silver badges9 bronze badges 4
  • 3 A pity that the answer was not awarded. I would have awarded it to this (and fie upon those who use browsers that don't support HTML (are there still any?)) – Mawg Commented Jul 10, 2015 at 10:33
  • A simple and effective solution that does no more, and no less, than the OP requested. – Victor Stoddard Commented Nov 25, 2016 at 22:54
  • 7 The mark tag is not meant to be used for formatting. – Jessica B Commented Aug 20, 2018 at 14:52
  • 1 The mark tag adds some padding at the beginning and end of the text, so the class needs to have margin:0; in it. This is evidence that it's for highlighing, not general formatting, for which the span tag is better-suited. – Robot Head Commented Apr 6, 2023 at 18:44
Add a comment | 42 <p style="font-size:14px; color:#538b01; font-weight:bold; font-style:italic;"> Enter the competition by <span style="color:#FF0000">January 30, 2011</span> and you could win up to $$$$ — including amazing <span style="color:#0000A0">summer</span> trips! </p>

The span elements are inline an thus don't break the flow of the paragraph, only style in between the tags.

Share Improve this answer Follow answered Jan 7, 2011 at 5:41 Damien-Wright's user avatar Damien-WrightDamien-Wright 7,5244 gold badges29 silver badges23 bronze badges Add a comment | 31

use spans. ex) <span style='color: #FF0000;'>January 30, 2011</span>

Share Improve this answer Follow answered Jan 7, 2011 at 5:41 brian_d's user avatar brian_dbrian_d 11.4k5 gold badges50 silver badges73 bronze badges Add a comment | 28 <font color="red">This is some text!</font>

This worked the best for me when I only wanted to change one word into the color red in a sentence.

Share Improve this answer Follow edited Sep 10, 2017 at 15:03 Josh Lee's user avatar Josh Lee 177k39 gold badges277 silver badges280 bronze badges answered Sep 10, 2017 at 15:01 user8588011's user avatar user8588011user8588011 3133 silver badges2 bronze badges 3
  • <font color="red">This is some text!</font> – user8588011 Commented Sep 10, 2017 at 15:02
  • 14 This is not supported in HTML 5. – Stephen Commented Apr 1, 2019 at 23:55
  • 1 Deprecated: This feature is no longer recommended. developer.mozilla.org/en-US/docs/Web/HTML/Element/font – arnaudambro Commented Apr 14, 2022 at 14:50
Add a comment | 6

You can also make a class:

<span class="mychangecolor"> I am in yellow color!!!!!!</span>

then in a css file do:

.mychangecolor{ color:#ff5 /* it changes to yellow */ } Share Improve this answer Follow edited Nov 20, 2015 at 16:00 Muds's user avatar Muds 4,1065 gold badges36 silver badges57 bronze badges answered Nov 20, 2015 at 15:34 JayMcpeZ_'s user avatar JayMcpeZ_JayMcpeZ_ 611 silver badge1 bronze badge Add a comment | 6

Tailor this code however you like to fit your needs, you can select text? in the paragraph to be what font or style you need!:

<head> <style> p{ color:#ff0000;font-family: "Times New Roman", Times, serif;} font{color:#000fff;background:#000000;font-size:225%;} b{color:green;} </style> </head> <body> <p>This is your <b>text. <font>Type</font></strong></b>what you like</p> </body> Share Improve this answer Follow edited Jun 19, 2016 at 12:07 Wtower's user avatar Wtower 19.9k12 gold badges108 silver badges85 bronze badges answered Jun 19, 2016 at 11:23 Trevor Lee's user avatar Trevor LeeTrevor Lee 811 silver badge2 bronze badges Add a comment | -2

You could use the longer boringer way

<p style="font-size:14px; color:#538b01; font-weight:bold; font-style:italic;">Enter the competition by</p><p style="font-size:14px; color:#ff00; font-weight:bold; font-style:italic;">summer</p>

you get the point for the rest

Share Improve this answer Follow answered Nov 17, 2015 at 19:51 otis answer's user avatar otis answerotis answer 211 bronze badge Add a comment | Highly active question. Earn 10 reputation (not counting the association bonus) in order to answer this question. The reputation requirement helps protect this question from spam and non-answer activity.

Not the answer you're looking for? Browse other questions tagged
  • html
  • css
  • text
  • colors
  • inline
or ask your own question.

  • The Overflow Blog
  • How developer jobs (and the job market) changed in 2024
  • You should keep a developer’s journal
  • Featured on Meta
  • The December 2024 Community Asks Sprint has been moved to March 2025 (and...
  • Stack Overflow Jobs is expanding to more countries

Linked

38 Change color of one character in a text box HTML/CSS -1 How do I change the font colour of text in the same line in HTML5 without using div tags and WITHOUT CONTAINERS? 1 How to color specific word inside paragraph tag? 2 Change font color for each word in a string (JS or PHP) 1 How to change a color of a piece of text in jQuery? 1 Styling a specific sentence in a paragraph with CSS 1 Accessing and coloring specific text within HTML table cell without using RegExp 1 Is there a way to output text or string in an html pre tag from a string builder with styling? 0 How do I change text color when I have a universal font color set? -1 i want to change 3 dfferent type of font color in php See more linked questions 1 changing html text colors with css 1 How do I make specific words turn different colours? 0 Is there a way to make every word different color in CSS? 0 how to colorize a string/word in html/jquery 0 Change color for each word in text without js 0 How to change the font color of specific words in CSS? 2 Change font color for each word in a string (JS or PHP) 1 change color of first letters of few words of a string using css 1 Change color of a word in html 3 Javascript - How to style specific word in a string of text?

Hot Network Questions

  • Which model would recognize the rotated version of its input without explicit training during inference?
  • UK Masters Application: UG Exams missed due to illness: concerned about low degree grade percentage despite first class
  • Can I use copyleft-licensed library in MIT-licensed project?
  • What does the verb advantage mean in this sentence from chapter one of "Wuthering Heights"?
  • Extract-expand KDF using AES
  • VSCode highlight .tikz file similar to .tex
  • Does the universe not being locally real mean anything for our daily lives?
  • Tangent Criterion In Euclidean Geometry
  • Minimum Number of Squares to Color
  • Elementary consequence of non-abelian class field theory
  • proper method to reduce 2 inch pipe to 1.5 inch pipe
  • Where did Tolstoy write that a man is like a fraction?
  • Minimum temperature for pocket lighters
  • The button indexes are different between two controllers. Is there a work around?
  • Why is Curl licensed under an MIT-like license despite using a GPL library?
  • Wonderful animations on a YouTube channel made with LaTeX
  • Why is the air pressure different between the inside and outside of my house?
  • How to design a network and loss function for classes, composed of two other classes?
  • Name that logic gate!
  • Why does a country like Singapore have a lower gini coefficient than France despite France having higher income/wealth taxes?
  • What livery is on this F-5 airframe?
  • Help identifying partially built set
  • Reference request on Sofia Kovalevskaya
  • How can I replace the anode rod with this in the way?
more hot questions Question feed Subscribe to RSS Question feed

To subscribe to this RSS feed, copy and paste this URL into your RSS reader.

lang-html

Từ khóa » Html Color Text Inline