Html coloring one word

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?

Sam R.'s user avatar

Sam R.

15.9k11 gold badges68 silver badges122 bronze badges

asked Jan 7, 2011 at 5:38

Mitch's user avatar

<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>

answered Jan 7, 2011 at 5:41

Jacob's user avatar

JacobJacob

77.1k24 gold badges147 silver badges228 bronze badges

3

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.

bad_coder's user avatar

bad_coder

10.8k20 gold badges44 silver badges68 bronze badges

answered Dec 14, 2012 at 23:58

Juan Pablo Pinedo's user avatar

5

<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.

answered Jan 7, 2011 at 5:41

Damien-Wright's user avatar

Damien-WrightDamien-Wright

7,2064 gold badges27 silver badges23 bronze badges

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

answered Jan 7, 2011 at 5:41

brian_d's user avatar

brian_dbrian_d

11.1k5 gold badges47 silver badges72 bronze badges 

<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.

Josh Lee's user avatar

Josh Lee

169k38 gold badges268 silver badges273 bronze badges

answered Sep 10, 2017 at 15:01

user8588011's user avatar

user8588011user8588011

2833 silver badges2 bronze badges

3

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 */ }

Muds's user avatar

Muds

3,9645 gold badges32 silver badges51 bronze badges

answered Nov 20, 2015 at 15:34

JayMcpeZ_'s user avatar

JayMcpeZ_JayMcpeZ_

511 silver badge1 bronze badge

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>

Wtower's user avatar

Wtower

18.4k11 gold badges106 silver badges80 bronze badges

answered Jun 19, 2016 at 11:23

Trevor Lee's user avatar

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

answered Nov 17, 2015 at 19:51

otis answer's user avatar

Источник
  1. Change the Color of One Word in a String of Text in HTML
  2. Change the Color of One Word in a String of Text in HTML Using Internal CSS
  3. Change the Color of One Word in a String of Text in HTML Using JavaScript

Change the Color of One Word in a String of Text in HTML

The main topic of this article is utilizing CSS to highlight or change the color of any particular word in a text. We’ll go over several techniques for implementing this feature.

We will learn to color a text using internal and inline CSS. Later, we’ll look at how to use JavaScript to implement the same functionality.

Change the Color of One Word in a String of Text in HTML

We commonly see on websites that a single word in a text has a different color than the others; of course, it captures the users’ attention. Let’s discuss how we can do the same on our web pages.

In the earlier versions of HTML, we had a <font> tag that can be used to implement this feature like this:

<font color="red">Red</font>

But the tag is removed in HTML5 and is no longer supported. So, we will learn about an HTML <span> tag to help us do the task.

The <span> element is an inline container to mark up a section of a text or a section of a page. The id or class attribute of the <span> tag allows simple styling with CSS and modifications with JavaScript.

The <span> tag also allows us to apply inline styling, similar to the div element. However, <span> is an inline element, whereas div is a block-level element.

Check the example below to understand this.

<html>
    <body>
        <p>Hello, I am
            <span style="color: red">Red</span>
        </p>
    </body>
</html>

CSS’s color property gives the text a specific color. There are many ways to specify the required color; in the above example, we select the color by its name.

HTML can recognize 16 color names which are black, white, grey, silver, maroon, red, purple, fuchsia, green, lime, olive, yellow, navy, blue, teal, and aqua. New browsers can recognize 140 CSS color names.

You can check all the HTML-recognized color names from here. As we mentioned, many other ways to specify the required color exist.

Let’s have a look at different methods.

RGB Colors

RGB stands for red, green, blue. It uses an additive color scheme in which the three primary colors, Red, Green, and Blue, are combined to create each color.

The red, green, and blue parameters each have a value between 0 and 255 that describes the color’s intensity. This indicates that there are 256 x 256 x 256 = 16,777,216 distinct colors.

For instance, rgb(255, 0, 0) is rendered red because the color red is set to its greatest value, 255, while the other two colors, green and blue, are set to 0. Set all color parameters to zero like this rgb(0,0,0) to display black.

You can see the RGB value of different colors from here.

<html>
    <body>
        <p>Hello, I am
            <span style="color: rgb(241, 196, 15 )">Yellow</span>
        </p>
    </body>
</html>

RGBA Colors

RGBA colors are an extension of RGB colors, including an Alpha channel that determines a color’s opacity. The syntax for an RGBA color value is:

rgba (red, green, blue, alpha)

The value of the alpha parameter ranges from 0.0 (complete transparency) to 1.0 (full visibility). You can also use this property for the background colors, as sometimes we need different background colors with various opacity.

HEX Colors

Hex colors use hexadecimal values to represent colors from different color models. Hexadecimal colors are represented by the #RRGGBB, where RR stands for red, GG for green, and BB for blue.

The hexadecimal integers that specify the color’s intensity can range from 00 to FF; an easy example is #0000FF. Because the blue component is at its highest value of FF while the red and green parts are at their lowest value of 00, the color is entirely blue.

You can see the hex value of different colors from here.

<html>
    <body>
        <p>Hello, I am
            <span style="color: #0000FF">Blue</span>
        </p>
    </body>
</html>

HSL Colors

HSL is an acronym that stands for Hue, Saturation, and Lightness. Let’s take a deeper look at each term.

  1. Hue: The hue ranges from 0 to 360 degrees on the color wheel. Red is 0; yellow is 60; green is 120; blue is 240, etc.
  2. Saturation: This quantity is measured as a percentage, with 100% denoting fully saturated (i.e., no shades of grey), 50% denoting 50% grey but with still-visible color, and 0% indicating entirely unsaturated (i.e., completely grey and color invisible).
  3. Lightness: This is also a percentage: 0% is black, and 100% is white. The amount of light we wish to give a color is expressed as a percentage, with 0% being black (where there is no light), 50% representing neither dark nor light, and 100% representing white (complete lightness).

The syntax for HSL color values is:

hsl(hue, saturation, lightness)

You can see the HSL value of different colors from here.

<html>
    <body>
        <p>Hello, I am
            <span style="color: hsl(23, 97%, 50% )">Orange</span>
        </p>
    </body>
</html>

HSLA Colors

HSLA colors are an extension of HSL with an Alpha channel specifying a color’s opacity. An HSLA color value is determined with:

hsla(hue, saturation, lightness, alpha)

The value of the alpha parameter is a number having a range strictly between 0.0, which means fully transparent, and 1.0, which means not transparent.

Change the Color of One Word in a String of Text in HTML Using Internal CSS

We have seen in detail all the methods of giving color in CSS. We have been using inline CSS for everything up until this point.

However, inline CSS is not a suggested method because it is only tied to the element. We must rewrite much if we want the same functionality on different page regions.

So let’s color our text using Internal CSS, defined in the HTML <head> tag inside a <style> tag.

<html>
    <head>
        <title>CSS Color Property</title>
        <style>
            #rgb{
              color:rgb(255,0,0);
            }
            #rgba{
              color:rgba(255,0,0,0.5);
            }
            #hex{
              color:#EE82EE;
            }
            #hsl{
              color:hsl(0,50%,50%);
            }
            #hsla{
              color:hsla(0,50%,50%,0.5);
            }
            #built{
              color:green;
            }
        </style>
    </head>
    <body>
        <h1>
            Hello this is <span id="built">Built-in color</span> format.
        </h1>
        <h1>
             Hello this is <span id="rgb">RGB</span> format.
        </h1>
        <h1>
          Hello this is <span id="rgba">RGBA</span> format.
        </h1>
        <h1>
            Hello this is <span id="hex">Hexadecimal</span> format.
        </h1>
        <h1>
            Hello this is <span id="hsl">HSL</span> format.
        </h1>
        <h1>
            Hello this is <span  id="hsla">HSLA</span> format.
        </h1>
    </body>
</html>

Change the Color of One Word in a String of Text in HTML Using JavaScript

We can change the color of a specific word in a sentence using JavaScript. We need to give an ID to our <span> tag and then get that element from JavaScript using document.getElementById(ID-name) and call the style property on it. Here’s how.

<html>
    <body onload="myFunction()">
        <p>Hello, I am <span id="color-text">Magenta.</span></p>
        <script>
            function myFunction() {
              document.getElementById("color-text").style.color = "magenta";
            }
        </script>
    </body>
</html>
Источник

If you want to change the color of the first word of a text, you can use the CSS :before pseudo-element, which is used to add any element. Its value is defined with the content property. If it is not used, the content will not be generated and inserted.

In the example below, we use a <div> element with a class «word» and specify its color. Then, we add the :before pseudo-element to the «word» class and add the word the color of which we want to change with the color property. After that, we specify its color.

Example of changing the color of the first word of a text:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .word {
        color: #000;
      }
      .word:before {
        color: #f00000;
        content: "Lorem";
      }
    </style>
  </head>
  <body>
    <div class="word">
      Ipsum is simply dummy text of the printing and typesetting industry. 
      Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
      when an unknown printer took a galley of type and scrambled it to make a
      type specimen book. It has survived not only five centuries, but also 
      the leap into electronic typesetting, remaining essentially unchanged.
      It was popularised in the 1960s with the release of Letraset sheets 
      containing Lorem Ipsum passages, and more recently with desktop 
      publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
  </body>
</html>

Result

Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a
type specimen book. It has survived not only five centuries, but also
the leap into electronic typesetting, remaining essentially unchanged.
It was popularised in the 1960s with the release of Letraset sheets
containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Of course, visually, we achieved our goal of changing the color of the first word, but this is not good for accessibility. Some screen readers may skip over CSS-generated content. Besides, this breaks the concept of separating content from formatting.

Example of changing the color of the first word:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div[data-highlightword] {
        position: relative;
        color: #666666;
      }
      div[data-highlightword]::before {
        content: attr(data-highlightword);
        color: purple;
        position: absolute;
        top: 0;
        left: 0;
      }
    </style>
  </head>
  <body>
    <div data-highlightword="Example">
      Example for you.
    </div>
  </body>
</html>

Example of changing the color of the first word with the HTML <span> tag:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      span {
        color: green;
      }
    </style>
  </head>
  <body>
    <div>
      <span>Example</span> for you.
    </div>
  </body>
</html>

Источник

In this article, we will see how to change the color of one word in HTML.

Step by Step guide to changing color

<!DOCTYPE html>
<html>
<head>
<title>color of one word</title>
</head>
<style type="text/css">
span{
color: red;
}
</style>
<body>

<p>The <span>sun</span> shines everywhere, not just on the beach </p>
</body>
</html>

Output:

html change color of one word

  1. First, we wrote the HTML basic syntax. And the title is set to be “color of one word”.
  2. In the body section, we create a <p> tag with some text.
  3. I want to change the color of only the word “sun” to red in the paragraph text. So, I put the word “sun” inside the <span> tag.
  4. Then In the <style>, we styling for span only, and the color is set to be red. So, see the above output the span word “sun” is displayed in red color.

So, you can also change the color of a specific word by placing <span> tag inside <p> tag. If you need to change the color of two separate words in a paragraph, you should set the span with a different classname, see the given example code.

.A{
color: blue;
}
.B{
color: green;
}
<p>The <span class="A">sun</span> 
shines everywhere, not just on the <span class="B">beach</span>
</p>

Output:

html change color of one word

  1. Here, I want to change the color of the word “sun” to blue and “beach” to green. So, I put the word “sun” inside the <span> tag with classname “A” and the word “beach” inside the <span> tag with classname “B”
  2. In CSS, we select the A classname using the dot operator and then set the color to blue. Then we select the ‘B’ classname using the dot operator and then set the color to green.
  3. See the above output, the two separated words will displayed in a different color

Источник

almost 10 years

Hi, I didn’t want to only use the p style=”color:blue”- /p because that makes the whole paragraph blue & if I try to put it around just one word, the word is obviously shifted onto a new paragraph. I found — font color=red — online & used it before the word I wanted to be red and had to use — font color=black, to get the words back to black so that just the word “Sheffield” was red.
Is it ok to use or is there now a better, more acceptable way ?

When I try to copy my code here, it alwasys shows rendered version, how do I copy code to show as code ?

Answer 519931cb32450b3c3c002c2d

Hi Chrissy52, as far as posting your code, sometimes it takes a few tries.
To colored just one word you can use <span style="your style"> WORD</span>.
This way you don’t have to style the whole paragraph.
Example: <p> The quick brown <span style="color: brown">fox</span> jumps over...</p>.
This colors the “fox” word brown.

SPAN is a more localized way to style. Also if you are using an stylesheet, you can give your span an id# instead of “color” and apply the color on the external stylesheet instead. But the trick is to wrap your word in <span></span>.

points

almost 10 years

Popular free courses

  • Free Course

    Learn SQL

    In this SQL course, you’ll learn how to manage large datasets and analyze real data using the standard data management language.

    Language Fluency

  • Free Course

    Learn JavaScript

    Learn how to use JavaScript — a powerful and flexible programming language for adding website interactivity.

    Language Fluency

  • Free Course

    Learn HTML

    Start at the beginning by learning HTML basics — an important foundation for building and editing web pages.

    Language Fluency

Explore full catalog

Источник

Понравилась статья? Поделить с друзьями:
  • Html opens in word
  • How to write text on a line in word
  • Html open with word
  • How to write report in word
  • Html break word in table