How to change html font color. HTML font color

How to change font color in html

If you have any knowledge of web technologies, you should know that all the markup and content of a document is contained in an html file, and in the file css styles this stores the styles that define appearance various elements. So, it is css that we need to use to change the font color and everything else.

There are tags in html that allow you to apply certain effects to text, but you must admit that coming up with hundreds of tags for each shade would not be entirely reasonable. You can control this much more conveniently in css. For example, this is how you can set the color html font-the body element, that is, a tag that includes all the contents of the page that is displayed on the screen.

body( color: red; )

We have assigned the color red to the body of the page. Paragraphs, lists, headings and all other elements will receive it. This will happen until the styles for these elements are redefined to others.

Color recording formats

Perhaps you have some knowledge of web design? In this case, you should be aware that there are different color modes. For example, rgb, rgba, hsl, hex, etc. Of course, the easiest way to set a tone is to simply write a keyword. We did this in the example above, the value red makes the letters red, blue – blue, brown – brown. These are just flower names in English.

The only thing you need to know in this case is the name of the desired color. You can view them on the Internet in any table. The next popular way to specify a color is to write it down hexadecimal code. This is the so-called hex format. Examples:

p( color: #000; ) /* Text in paragraphs will be black. */ table( color: #fff; ) /* Content in tables will be white. */

As you can see, you need to write down the grid, followed by the color code. How to recognize him? For example, you can open Photoshop or any other graphic editor, in which, when selecting a color, its hex code is displayed. You can also use the online service.

RGB is another one popular format records. It simply stands for red, green, blue. The color in this format is set like this:

#footer( color: rgb(234, 22, 56); )

The element with id footer will receive the specified color. The share of red will be 234, green – 22, blue – 56. These values ​​can be written from 0 to 255. Accordingly, our shade will be closer to red. In Paint, you can add colors to your palette by changing the saturation of the three primary colors.

The advantage of this method is that you can choose from millions of colors just by changing three numbers. When writing using keywords, you will only have a few hundred colors in your arsenal.

Rgba - translucent text!

Yes it new mode records, which in graphic editors has been around for a long time, but it appeared relatively recently in web design. It is written like this:

a( rgba(255, 12, 22, 0.5); )

The last number in the entry sets the transparency. It can be written from 0 to 1, where 1 is completely opaque text, that is, the default behavior. In this case, all links will turn red, but due to transparency, the brightness of the color will be much less, and if there is another background or element under the link, it will be visible.

Wrong way to set color

There is a deprecated color attribute in html and with its help it was possible to write the text color using keyword. Now this might not even work in modern browsers, and indeed this method violates generally accepted web standards. And it's also inconvenient.

How to determine the color for an arbitrary fragment

Okay, we're talking about font color for paragraphs, links and tables, but these are solid elements, but what if you need to define a color for one sentence, one word, one letter, after all?

We simply enclose the desired fragment in span tags. We write a class attribute inside the tag, to which we set an arbitrary, but understandable value. For example, like this:

That's it, now all that remains is to access the selector in the css.

Some sites attract users not with animation, not with pictures or photographs, not with videos, but solely with their text content. Text is an integral part of the content of many popular sites. In previous lessons, we looked at CSS properties that allow you to change the color of text, add a shadow to it, align it, and add an underline, overline, or even strikethrough to it. This lesson will look at what font families there are and how to change the default text font.

Difference between Sans-serif and Serif font families

website - sans-serif font

website - serif font

Font families in CSS

IN CSS fonts divided into families, each family consists of a set of fonts that have general characteristics. There are only five font families:

• sans-serif - sans-serif fonts, they are considered to be better readable on a computer screen than fonts from the serif family.
• serif is a serif font family. Many people associate them with newspaper articles. Serifs are decorative strokes and dashes along the edges of letters.
• monospace is a family of fonts whose characters have the same fixed width. Such fonts are used primarily to display program code examples.
• cursive - fonts that imitate handwritten text.
• fantasy - artistic and decorative fonts. They are not very widespread, are not available on all computers, and are rarely used in web design.

The font-family property allows you to change the default font. It usually contains a comma-separated list of interchangeable fonts belonging to the same family. If the font name consists of more than one word, it must be specified in quotation marks. The family name is usually indicated at the end of the list:

Body (font-family: Verdana, Helvetica, Arial, sans-serif; )

Let's look at how the browser processes the list of fonts specified in our font-family property:

1. It first checks to see if the Verdana font is installed on your computer and, if so, uses it as the font for the text inside the element (in our case, inside the element )
2. If Verdana is not installed, it looks for the Helvetica font. If the search is successful, uses it inside .
3. If Helvetica is not installed, it looks for the Arial font. If it is available on the computer, it applies it internally .
4. Finally, if none of the specified fonts are found, the first font from the sans-serif family found by the browser on the computer is used. This way, the browser can independently determine the appropriate font from the family.

CSS property font-family

Paragraph using Times New Roman font.

Paragraph using Arial font.

Note: When selecting only one specific font, it is important to understand that the browser will only display it if the font is installed on the user's computer. If the font is not found, the text will be displayed in the "Times New Roman" font, which is the default font in all browsers.

In this tutorial we will look at the last tag attribute , which sets the color of the text. By default, the text is black, which is displayed on a white background. In order to change text color in html, you need to apply the attribute tag color :