The font color on the website can be set by HTML Help-code. There is a tag for this font. By definition, a tag font serves as a kind of “wrapper” or “container” for text, by controlling the properties of which you can change the design of the text.

Tag font applies as follows:

Website builder "Nubex"

The easiest way to change the font color in HTML is to use the attribute color tag font:

Website builder "Nubex"

This sets the color blue for the word surrounded by the tag font.

But besides the color parameter, the tag has other attributes.

FONT tag attributes

Tag font has only three attributes:

• color- sets the text color;
• size- sets the text size;
• face- specifies the font family.

Parameter color can be specified by a color name (e.g. “red”, “blue”, “green”) or a hexadecimal code (e.g. #fa8e47).

Attribute size can take values ​​from 1 to 7 (the default is 3, which corresponds to 13.5 points for the Times New Roman font). Another option for specifying the attribute is “+1” or “-1”. This means that the size will be changed relative to the base by 1 more or less, respectively.

Let's look at the use of these attributes in our example:

Website builder "Nubex"

We applied the tag font for one word, we set it to size 6, orange color and the “Serif” font family.

Setting text color using CSS

If you need to apply specific formatting (for example, change the text color) to several sections of text, then it will be more appropriate to use CSS code. There is a color attribute for this. Let's look at how to use it in our example:

Constructor sites "Nubex"

Here we set a blue color for the word “Designer” (its size, by default, is 100% of the base), a green color and a size of 125% for the word “sites”, an orange color and a size of 150% for the word “Nubex”.

Lesson 7. Text and background colors in HTML.

Date: 2008-12-05

How to set the background and text color on a web page?

By default, the color of text and, in general, any font on web pages is always black (#000000 ). But we can always set absolutely any color that we like and looks decent or is more suitable for the design of a particular site.

Set the text color

In HTML, the color of text, font, background and other elements can be set in two ways:

1. Method 1. In paired tags attribute is written indicating the name of the desired color. The color name is indicated in English. For example, the color of the title on our web page can be set in this way:

Comments on this article (lesson):

Andrey! What a wonderful site you have! I have been using it regularly for the second week now: I study your lessons and video tutorials; I read your literature and download programs; I'm taking my first steps in web programming! And, most importantly, I can do it!!! But I’m not a physicist at all, but a lyricist! And anyone who visits my literary website can be convinced of this: “POEMS BY OLEG GUZ” My details: e-mail: [email protected] website: http://sites.google.com/site/stihiolegguz/

check the code carefully

I tried changing the background color and it doesn't work! How to change the background color?

Find the "html" header. It should be at the top of the document.

Remember the basic syntax for this process. To create a gradient, you need to know two quantities: the starting point/angle and the range of colors that will fade into each other. You can choose several colors so that they blend into each other; You can also set the direction or angle of the transition.

background: linear-gradient(direction/angle, color1, color2, color3 and so on);

Create a vertical gradient. If you don't specify a direction, the gradient will go from top to bottom. To create such a gradient, enter the following code between the tags :

html (min-height: 100%;) body (background: -webkit- linear-gradient (#93B874, #C9DCB9); background: -o- linear-gradient (#93B874, #C9DCB9); background: -moz- linear -gradient (#93B874 , #C9DCB9 ); background : linear-gradient ( #93B874 , #C9DCB9 );

• IN different browsers The gradient functions are implemented differently, so you need to add multiple versions of the code.

1. Create a directional gradient. If you don't want the gradient to run vertically, specify the direction in which the colors will fade. To do this, enter the following code between the tags :

   html (min-height: 100%;) body (background: -webkit- linear-gradient (left, #93B874, #C9DCB9); background: -o- linear-gradient (right, #93B874, #C9DCB9); background: -moz- linear-gradient (right, #93B874, #C9DCB9); background: linear-gradient (to right, #93B874, #C9DCB9);

   • If you like, rearrange the words "left" and "right" to experiment with different gradient directions.

2. Use other properties to customize the gradient. You can do more with it than you think.

   • For example, after each color you can enter a percentage number. This will indicate how much space each color segment will occupy. Here is an example code with these parameters:

     background : linear-gradient (#93B874 10%, #C9DCB9 70%, #000000 90%);

   • Add transparency to the color. In this case, it will gradually fade. To achieve a fade effect, use the same color. To set the color, you need the rgba() function. The last value will determine the transparency: 0 is an opaque color and 1 is a transparent color.

     background : linear-gradient (to right , rgba ( 147 , 184 , 116 , 0 ), rgba ( 147 , 184 , 116 , 1 ));

Review the code. The code to create a color gradient as a web page background would look something like this:

< html > < head > < style >html (min-height: 100%;) body (background: -webkit- linear-gradient (left, #93B874, #C9DCB9); background: -o- linear-gradient (right, #93B874, #C9DCB9); background: -moz- linear-gradient (right, #93B874, #C9DCB9); background: linear-gradient (to right, #93B874, #C9DCB9); < body >

Creation date: 2009-11-18

So, now it's time to study, how colors change the text you entered. This lesson will consist of 2 parts. In we will color a separate part of the text, and in , we will make the entire text one color, and the necessary part of it, a different color.

1. part

Although all colors in HTML are written in an unusual way, it is done very simply. Firstly, I suggest you download the web color palette by clicking on the word PALETTE, or search more full version on the Internet. Next to each color in the palette you find, there will be a code ( english letters and numbers). In order for our color to be, for example, blue, we need to write the following tag:

Hello! Let's start learning HTML

That is, this is what we have:
1. the text is enclosed in a tag ...
2. tag has attribute color = #0000FF

Now let's go back to our example and look at everything clearly. Open the previously created page in Notepad again and change the font color:

We update HTML page and check what happened:

Result: The first line became blue, and the second remained the default - black.

In the same way, you can decorate any necessary part of the text, regardless of where it is located, at the beginning, in the middle or at the end of the text.

2. part

Now we set the color for the entire text of the document. This is done very easily. Let's remember our third article. In it we said that everything that is visible in the browser is written in the tag ... , that is, in the “body” of our document.

And so, as we know, ... - is also a tag, therefore, we can use it, just like the tag ... , set the required attributes.

The color in this case is set in the opening tag , and the entry will look like this: All text of your document

In this case, the entire text of the document, except that which is enclosed in tags ... with color assignment, it will have red color.

Now let's look at this part of the article using an example. Let's assign the color red to the entire text of the document, and leave the text that we made blue in part 1 as such. To do this, simply write the code to the opening tag :

Then, as always before viewing, save the document:

And finally, we update the HTML page in the browser:

Result: We learned how to set the entire document text to the required color, as well as make part of the text a different color.