Html text color one word

Text Color

In HTML, you can change the text color using Cascading Style Sheets (CSS). You can change the text color using inline style sheets, embedded style sheets, or external style sheets.

For the purposes of these examples, we’ll use inline style sheets, however, I encourage you to use external style sheets whereever possible.

In HTML, you can specify color using the color name, hexadecimal value (also known as the «hex value» or «hex color codes»), or the RGB value.

Color Name

You can use the color name to change the text color:

You can change the text color of a whole sentence or paragraph.

. or you can change the text color of one word or even a single l e tter.

Hexadecimal Value

You can specify text color by using the hexadecimal value.

Full Hexadecimal Notation

You can use the full hexadecimal value to change the text color:

You can change the text color of a whole sentence or paragraph.

. or you can change the text color of one word or even a single l e tter.

Hexadecimal Shorthand

Depending on the full hexadecimal value, you can shorten it from six digits to three digits. You can only do this if the six digit value is made up of three doubles (each double representing red, green, or blue). For example 990000 can be shortened to 900 . You can do this because in the shorthand version, each digit represents two digits.

You couldn’t shorten for example, fe0f00 because the red and green values are made up of different numbers ( fe and 0f respectively).

Here’s an example of changing the text color using hexadecimal shorthand:

You can change the text color of a whole sentence or paragraph.

. or you can change the text color of one word or even a single l e tter.

RGB Value

You can also specify text color using the RGB value. You can specify either integer values or percentage values. For example, you could express the color red as rgb(255,0,0) or rgb(100%,0%,0%) .

RGB Integer Range

You can change the text color of a whole sentence or paragraph.

. or you can change the text color of one word or even a single l e tter.

RGB Percentage Range

You can change the text color of a whole sentence or paragraph.

. or you can change the text color of one word or even a single l e tter.

RGBA Value

Using CSS3, you can specify text color using an RGBA value. In this context, the «A» refers to «Alpha Transparency» or opacity.

Note that at the time of writing, CSS3 is still in draft status and browser support for the RGBA method of specifying color is limited. Therfore, if your browser isn’t displaying this example properly, it’s probably because it doesn’t support the RGBA method.

HSL Value

CSS3 also allows you to set text color using the HSL color value. HSL stands for hue-saturation-lightness, and is a more intuitive way to create colors.

Note that at the time of writing, browser support for this method was limited. Therefore, if this example doesn’t display properly for you, it’s probably because your browser doesn’t support the HSL method for specifying colors.

You can change the text color of a whole sentence or paragraph.

. or you can change the text color of one word or even a single l e tter.

HSLA Value

Similar to the RGBA model, the HSLA model allows you to specify alpha transparency.

HTML Text Color Generator

You can also use the text generator to quickly generate color codes for your HTML.

Источник

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

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

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 tag that can be used to implement this feature like this:

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

The 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 tag allows simple styling with CSS and modifications with JavaScript.

The tag also allows us to apply inline styling, similar to the div element. However, 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">Redspan>  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 )">Yellowspan>  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">Bluespan>  p>  body>  html> 

HSL Colors

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% )">Orangespan>  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 tag inside a tag.

html>  head>  title>CSS Color Propertytitle>  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 colorspan> format.  h1>  h1>  Hello this is span id="rgb">RGBspan> format.  h1>  h1>  Hello this is span id="rgba">RGBAspan> format.  h1>  h1>  Hello this is span id="hex">Hexadecimalspan> format.  h1>  h1>  Hello this is span id="hsl">HSLspan> format.  h1>  h1>  Hello this is span id="hsla">HSLAspan> 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 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> 

Источник

How to Change the Color of the First Word in a Text

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

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:

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

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>

Источник