Useful Tips

How to change the color of text in an HTML page?


Is it possible to make the text color? For God's sake! There is an attribute for this. We will work with this color scheme now. In general, colors can be defined in two different ways. First, you can use the verbal color notation: blue, black, yellow, green, white etc. And you can - and their digital designation, just do not forget to put a "grid" in front of the digital equivalent - "#"! So color blue (blue) has its numerical value # 0000ff, Colour red (red) - value # Ff0000 and so on. That is, if we write:

Both of these entries are identical. Here are the meanings of some colors:

Color chart

Color nameColorCodeColour
aquaAqua# 00FFFF
The blackblack#000000
Blueblue# 0000FF
Fuchsiafuchsia# FF00FF
Limelime# 00FF00
Navy bluenavy#000080
Redred# Ff0000
Silversilver# C0C0C0
yellowyellow# FFFF00

Well, now from words to practice?

Take the same poem, and set ourselves the task:

  1. We write the title in font Comic Sans MS, give a large size of 7 points, place it in the center and fill it with red.
  2. We paint each verse of the poem in its own color: the first in blue, the second in green, and the third in yellow. Moreover, we will give the color of the first couplet in a simple name blue, the second and third - in the numerical equivalent of green and yellow.
  3. We write the first verse in font Impact
  4. We give the size of the second couplet in absolute size 4 points
  5. We give the size of the third couplet in relative size +1 point
  6. Well, the author will move the tag ADDRESS

Is the task clear? Well then let's go! We open our irreplaceable shablon.html template and insert what we need there:

Listing 10. Poem

Blurred faces

Forgotten Profiles

And the dots are stubborn thread.

The light is spreading

And manifests itself

Something that you will never forget.

Save our file as "text4.html" and then open this file in a browser window:

Here they are, the colors of the rainbow!

I apologize for the design. It is unlikely that he can withstand even the mildest criticisms. But, you see, but immediately it became much clear. Not only how to format the text correctly, but also the fact that you do not need to mix different styles, sizes and colors in one text.

So our next lesson came to an end. It was not so easy, you must admit! But then we now know the most necessary to beautifully design any text.

And in the next lesson we will learn how to work with the background. And this will be the last thing that is necessary for our first page.

Specifying an Inline Text Style Attribute

To understand how to change the color of text in HTML, just look at the list of attributes of the text field. Among them there are a number of values ​​that determine the style of the text enclosed in these tags, which are indicated inside the keyword style.

To change the color of the text, it is enough to enter the word style = '' in the selected section of the text field inside the opening tag. Within this attribute, you can specify various parameter values ​​- the value of the color attribute is responsible for changing the color tone of the text. By specifying this parameter, after the colon sign, you must specify the color in which all the characters of this field will be colored. In this case, determining the hue, you can specify both the explicit color value, for example, red or yellow, and its hexadecimal value, or rgb.

Regardless of the selected method for determining color, the result will be the same in the case of the same choice of shade. Thus, all of the following three examples will make the same changes to the text - they will color it yellow.

Change color using CSS

Using a style sheet also allows you to decide how to change the color of the text in HTML. CSS is fully supported by all modern versions of HTML, and also allows you to change the style of several elements of the page.

To understand how to change the color of text in HTML using CSS, you don’t need to understand the formal language for determining appearance. To determine the attributes of a certain element, it is necessary to create a CSS description that is written inside the tag and is defined by the tag

How to choose a more suitable way?

Having familiarized yourself with how to change the color of text in HTML, you should decide which way is better and more convenient to use in which cases. If the changes affect several elements of the document, then you should use the option using the style sheet - in this case, the page will not contain excessive code and you can easily change the style of each element by simply displaying them in the table itself. If you work with only one element, you can do this by changing the attribute of the built-in text style - this method is somewhat easier to understand and more readable.