Html for color word - Word и Excel - помощь в работе с программами

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.

15.9k11 gold badges68 silver badges122 bronze badges

asked Jan 7, 2011 at 5:38

<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

JacobJacob

77.1k24 gold badges147 silver badges228 bronze badges

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

10.8k20 gold badges44 silver badges68 bronze badges

answered Dec 14, 2012 at 23:58

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

169k38 gold badges268 silver badges273 bronze badges

answered Sep 10, 2017 at 15:01

user8588011user8588011

2833 silver badges2 bronze badges

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

3,9645 gold badges32 silver badges51 bronze badges

answered Nov 20, 2015 at 15:34

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

18.4k11 gold badges106 silver badges80 bronze badges

answered Jun 19, 2016 at 11:23

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

Источник

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

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.

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

Источник

Download Article

Easily change the color of text using CSS or HTML

Download Article

Creating Text Styles

Using Inline Styles

Tips

Do you want to change the color of the text on a web page? In HTML5, you can use CSS to define what color the text will appear in various elements on your page. You can also use inline style attributes to change the color of individual text elements in your CSS file. Using CSS will ensure that your web page is compatible with every possible browser. You can also use external CSS files to create a standard font color for a specific style across your entire website. This wikiHow article teaches you how to change text color using HTML and CSS.

1
Open your HTML file. The best way to change the color of your text is by using CSS. The old HTML <font> attribute is no longer supported in HTML5. The preferred method is to use CSS to define the style of your elements. Go ahead and open or create a new HTML document.
- This method will also work with separate CSS files that are linked to your HTML document. The examples used in this article are for an HTML file using an internal stylesheet.
2
Place your cursor inside the head of your HTML file. When you are using an internal style sheet for a specific HTML file, it is usually placed within the head of the HTML file. The head is at the top of the sheet in between the opening <head> tag, and the closing </head> tag.
- If your HTML document does not have a head, go ahead and enter the opening and closing head tags at the top of your HTML file.
Advertisement
3
Type the opening and closing tags for the style sheet. All CSS elements that affect the style of the webpage go in between the opening and closing style tags within the head section of your HTML document. Type <style> in the «head» section to create the opening style tag. Then type </style> a couple of lines down to create the closing style tag. When you’re finished, the beginning of your HTML file should look something like this:^[1]
```
<!DOCTYPE html>
<html>
<head>
<style>

</style>
</head>
```
4
Type the element you want to change the text color for followed by the opening and closing brackets. Elements you can change include the text body (body), paragraph text («<p>»), as well as headers («<h1>», «<h2>», «<h3>», etc.). Then enter the opening bracket («{«) one space after. Then add the closing bracket («}») a few lines down. In this example, we will be changing the «body» text. The beginning of your HTML file should look something like the following:
```
<!DOCTYPE html>
<html>
<head>
<style>
body {

}
</style>
</head>
```
5
Add the color attribute into the element section of the CSS. Type color: in between the opening and closing brackets of the text element you just created. The «color:» attribute will tell the page what text color to use for that element. So far, the head of your HTML file should look something like the following:
```
<!DOCTYPE html>
<html>
<head>
<style>
      body {
      color:
}
</style>
</head>
```
6
Type in a color for the text followed by a semi-colon («;»). There are three ways you can enter a color: the name, the hex value, or the RGB value. For example, for the color blue you could type blue; for the color name, rgb(0, 0, 255); for the RGB value, or #0000FF; for the hex value. Your HTML page should look something like the following:
```
<!DOCTYPE html>
<html>
<head>
<style>
body {
	color: red;
}
</style>
</head>
```
7
Add other selectors to change the color of various elements. You can use different selectors to change the color of different text elements. If you want the header to be a different color than the paragraph text or body text, you will need to create a different selector for each element within the «<style>» section. In the following example, we change the color of the body text to red, the header text to green, and the paragraph text to blue:
```
<!DOCTYPE html>
<html>
<head>
<style>
body {
	color: red;
}
h1 {
	color: #00FF00;
}
p {
	color: rgb(0,0,255)
}
</style>
</head>
<body>

<h1>This header will be green.</h1>

<p>This paragraph will be blue.</p>

This body text will be red.
</body>
</html>
```
8
Define a CSS class that changes text color. In CSS, you can define a class rather than using the existing elements. You can apply the class to any text element within your HTML document. To do so, type a period («.») followed by the name of the class you’d like to define. In the following example, we define a new class called «.redtext», which changes the color of the text to red. Then we apply it to the header at the top of the HTML document. Checkout the following example:
```
<!DOCTYPE html>
<html>
<head>
<style>
.redtext {
	color: red;
}
</style>
</head>
<body>

<h1 class="redtext">This heading will be red</h1>
<p>This paragraph will be normal.</p>
<p class="redtext">This paragraph will be red</p>

</body>
</html>
```

1

Open your HTML file. You can use inline HTML style attributes to change the style of a single element on your page. This can be useful for one or two quick changes to the style but is not recommended for widespread use. It’s best to use CSS for comprehensive changes. Go ahead and open or create a new HTML document.^[2]
2
Find the text element in the file that you want to change. You can use inline style attributes to change the text color of any of your text elements, including paragraph text («<p>»»), or your headline text («<h1>»).
```
<!DOCTYPE html>
<html>
<body>

<h1>This is the header you want to change</h1>

</body>
</html>
```
3
Add the style attribute to the element. To do so, Type style="" inside the opening tag for the element you want to change. In the following example, we have added the style attribute to the header text:
```
<!DOCTYPE html>
<html>
<body>

<h1 style="">This is the header you want to change</h1>

</body>
</html>
```
4
Type the color: attribute inside the quotation marks. Type «color» with a colon («:») within the quotation marks after the style attribute. So far, your HTML file should look something like the following:
```
<!DOCTYPE html>
<html>
<body>

<h1 style="color:">This is the header you want to change</h1>

</body>
</html>
```
5
Type the color you want to change the text to followed by a semi-colon («;»). There are three ways you can express a color. You can type the name of the color, you can enter the RGB value, or you can enter the hex value. For example, to change the color to yellow, you could type yellow; for the color name, rgb(255,255,0); for the RGB value, or #FFFF00; to use the hex value. In the following example, we change the headline color to yellow using the hex value:
```
<!DOCTYPE html>
<html>
<body>

<h1 style="color:#FFFF00;">This header is now yellow</h1>

</body>
</html>
```

Add New Question

Question

How would I type bold font in html?

<b></b> is the code for bold text, so you would put your text within that, e.g. <b> hello world </b>.
Question

How do I change background colors in HTML?

Use the bgcolor attribute with body tag.
Question

How do I change the color of the background?

You will create a similar tag as you did to change the font color. After putting everything in the body tag, you will put the {} brackets and on the inside, type «background-color:(insert desired color).» In code, it should look like this:

body {
color: black;
background-color:gold
}

This code gives you black text and a gold background.

See more answers

Ask a Question

200 characters left

Include your email address to get a message when this question is answered.

Submit

You can see a list of supported color names and their hex values at http://www.w3schools.com/colors/colors_names.asp

Thanks for submitting a tip for review!

About This Article

Article SummaryX

1. Open the file in a text editor.
2. Find the element you want to change.
3. Type style=″color:#FFFF00;″ in the opening tag.
4. Replace ″#FFFF00″ with your desired color.

Did this summary help you?

Thanks to all authors for creating a page that has been read 1,989,399 times.

Is this article up to date?

Источник

Setting text color on a website you’re building might be confusing at first. But in this article, you’ll learn how to do it.

In CSS, the background-color property is pretty straightforward for setting the background color of anything.

So what if you want to set the foreground color of something on the page? Especially text, which under normal conditions you wouldn’t want to set a background color for.

There’s no foreground-color property in CSS, so what makes this possible is the color property.

In this article, I will walk you through how to set the color of text using the color property. We’ll also look at the various ways it takes values.

The color property takes values in 4 different ways: named color, hexadecimal color, RGB color, and HSL color. Let’s look at each one now.

Named Colors

As the name implies, you bring in the color property and apply the value by naming the color you want. This may be red, green, blue, orange, crimson, cyan, or any other named color. There are around 147 named colors recognized by browsers.

The basic syntax looks like this:

element {
    color: colorName
}

<p>freeCodeCamp</p>

 p {
     color: crimson;
}

Hexadecimal Colors (or just Hex Colors)

Hex values are used to represent colors with a total of 6 characters. They start with the pound/number sign (#), then any number from 0 to 9, and finally any letter from A to F.

The first 2 values stand for red, the next two stand for green, and the last 2 represent blue. With hex values, there’s no limit to the shades of colors you can use.

<p>freeCodeCamp</p>

 p {
    color: #dc143c;
 }

RGB Colors

RGB stands for red, green, and blue. With RGB colosr, you specify the color in terms of how much red, green, and blue you want. All three are expressed with numbers between 0 and 255.

There is a type of RGB called rgba. The extra ‘a’ stands for alpha, which lets you specify the opacity of the color. It takes a value from 0.0 to 1.0 – 0.0 means 0% opacity, 0.5 means 50% opacity, and 1.0 means 100% opacity.

The basic syntax is rgba(amountOfRed, amountOfGreen, amountOfBlue, alpha).

You can limit it to rgba(amountOfRed, amountOfGreen, amountOfBlue) if you don’t want an alpha value.

Here’s the syntax for the regular RGB values:

<p>freeCodeCamp</p>

 p {
   color: rgb(220, 20, 60);
 }

And here it is demonstrating the alpha value in action with 50% (0.5) opacity:

p {
    color: rgb(219, 20, 60, 0.5);
}

HSL Colors

HSL stands for hue, saturation, and lightness. It is another way of specifying color for text (and anything else that takes color) in CSS.

Hue represents the color wheel in 360°. So, 0° is red, 120° is green and 240° is blue.
Saturation is the amount of gray in the color, expressed as a percentage. 0% is the shade of gray and 100% is the color itself.
Lightness is the amount of darkness and lightness in the color expressed as a percentage. 0% is black and 100% is white.

Just like the RGB colors, you can also set the opacity of the color. So, there’s also hsla.

The full basic syntax is hsl(colorDegree, saturationPercentage, lightnessPercentage, alpha). You can limit it to hsl(colorDegree, saturationPercentage, lightnessPercentage) in case you don’t want an alpha value.

<p>freeCodeCamp</p>

 p {
   color: hsl(348, 83%, 47%);
 }

You can apply a particular opacity to the hsl color like this:

 p {
   color: hsla(348, 83%, 47%, 0.5);
  }

Should You Use Named Colors, Hex Colors, RGB Colors, or HSL Colors to Assign Colors?

One of the wonderful things about CSS is that there are multiple ways of doing the same thing. You’ve seen this by applying colors to text.

Since you can apply colors in 4 different ways, you must be wondering which is the best to use.

When you use named colors, you’re kind of limited in how far you can go in applying different shades of colors. Red, green, blue, yellow, or any other named color has a lot of variations you won’t get access to with named colors. You’ll only have access to around 147 predefined colors recognized by browsers.

Hexadecimal colors are very dynamic. They are the most commonly used among developers because your limit is your creativity. With hex colors, you can use various shades and even use a color no one has ever used.

RGB colors are as dynamic as hex colors. Apart from being able to specify how much red, green, and blue you want from 0 to 255, you can also set how transparent you want the color to be with the extra alpha value.

HSL is the most dynamic of all. You get to specify the exact color you want in degrees from 0 to 360 within the color wheel, set how saturated and dark you want it to be in percentages, and also set an opacity from 0.0 to 1.0.

So really, it’s up to you and your use case – and just how creative or specific you want to get.

Conclusion

Applying colors to text helps make your website more attractive to visitors. The right color combo can also help your content become more readable too.

In this article, you have learned how to apply colors to text with the 4 different kinds of values you can use with the color property.

Thank you for reading, and keep coding.

Learn to code for free. freeCodeCamp’s open source curriculum has helped more than 40,000 people get jobs as developers. Get started

Источник

In HTML, we can change the color of any text using the following different ways:

Using HTML tag
Using an Inline style attribute
Using internal CSS

1. Using HTML tag

Note: HTML 5 does not support the color attribute of font, so we have to use the inline style attribute and internal CSS options for changing the color of a text.

If we want to change the color of a text using Html tag which is to be displayed on a web page, we have to follow the steps which are given below. Using these steps, we can easily change the color of any text:

Step 1: Firstly, we have to type the Html code in any text editor or open the existing Html file in the text editor in which we want to use the Html tag.

Step 2: Now, move the cursor at the starting of that text whose color we want to change. And then, type the empty Html <font> tag at that position.

Step 3: Then, we have to close the font tag at the end of the text whose color we want to change.

Step 4: Now, we have to add the attribute of the font tag whose name is «color«. So, type the color attribute within the starting <font> tag. And, then we have to give the color which we want to use on the text. So, type the name of color in the color attribute as described in the following block.

Test it Now

Step 5: And, at last, we have to save the Html code in the text editor and run the code. After execution, we will see the output in the browser. The following screenshot shows the output of the above Html Code:

2. Using an Inline Style attribute

If we want to change the color of a text using an inline style attribute which is to be displayed on a web page, we have to follow the steps which are given below. Using these steps, we can easily change the color of text.

Step 1: Firstly, we have to type the Html code in any text editor or open the existing Html file in the text editor in which we want to use the style attribute for changing the color of a text.

Step 2: Now, move the cursor at the starting of that text whose color we want to change. And then, type the inline style attribute within any element. Here, we use the <p> (paragraph) tag:

Step 3: In this step, we have to give a name of color as a value. We can give the color name in three forms:

We can type the name of a color
We can also enter the RGB value of a color
We can also enter the hexadecimal value of a color.

Step 4: Then, we have to close the element at the end of the text whose color we want to change.

Step 4: And, at last, save the Html code which changes the text color using the CSS style attribute.

Test it Now

The output of the above code is shown in the following screenshot:

2. Using Internal CSS

If we want to change the color of a text using an internal cascading stylesheet which is to be displayed on a web page, we have to follow the steps which are given below. Using these steps, we can easily change the color of text.

Step 1: Firstly, we have to type the Html code in any text editor or open the existing Html file in the text editor in which we want to use the internal CSS for changing the color of a text.

Step 2: Now, we have to place the cursor in the head tag of the Html document and then define the styles inside the <style> tag as shown in the following block. And, then type the color attribute into the element selector.

Step 3: Now, we have to type the defined element selector before the text whose color we want to change.

Test it Now

The output of the above Html code is shown in the following screenshot:

Источник