Which attribute is not used in the font tag. HTML font color. with names of different models

Thumbnail

Thumbnail

More than usual

Less than usual

Italics

Italics

With underscore

Crossed out

Style attribute capabilities

In addition to the described tags, there are several more ways to change the font in html. One of them is to use the generic style attribute. Using the values ​​of its properties, you can set the display style of fonts:

1) font-family – the property sets the font family. It is possible to list multiple values.
Changing the font in html to the next value will occur if the previous family is not installed on the user's operating system.

Writing syntax:

font-family: font-name [, font-name[, ...]]

2) font-size – the size is set from 1 to 7. This is one of the main ways you can increase the font in HTML.
Writing syntax:

font-size: absolute size | relative size | meaning | interest | inherit

You can also set the font size:

• In pixels;
• In absolute terms ( xx-small, x-small, small, medium, large);
• In percentages;
• In points (pt).

Font-size:7

Font-size:24px

Font-size: x-large

Font-size: 200%

Font-size:24pt

font-style: normal | italic | oblique | inherit

Values:

• normal – normal spelling;
• italic – italic;
• oblique – font slanted to the right;
• inherit – inherits the spelling of the parent element.

An example of how to change the font in html using this property:

font-style:inherit

font-style:italic

font-style:normal

font-style:oblique

font-variant: normal | small-caps | inherit

An example of how to change the font in html with this property:

font-variant:inherit

font-variant:normal

font-variant:small-caps

font-weight: bold|bolder|lighter|normal|100|200|300|400|500|600|700|800|900

Values:

• bold – sets the html font to bold;
• bolder – bolder relative to normal;
• lighter – less saturated relative to normal;
• normal – normal spelling;
• 100-900 – sets the font thickness in numerical equivalent.

font-weight:bold

font-weight:bolder

font-weight:lighter

font-weight:normal

font-weight:900

font-weight:100

HTML font property and font color

Font is another container property. Inside itself, it combined the values ​​of several properties intended for changing fonts. font syntax:

font: font-size font-family | inherit

The value can also be set to the fonts used by the system in the labels on various controls:

• caption – for buttons;
• icon – for icons;
• menu - menu;
• message-box – for dialog boxes;
• small-caption – for small controls;
• status-bar – status bar font.

The font color on the site can be set using HTML 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 areas 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”.

Today we will continue to consider various tags, namely Font, Blockquote, Pre, Strong, Em, B, I and others, which allow text formatting.

Blockquote and Pre - HTML formatting

Previously (even before the advent of CSS) the quote tag Blockquote in HTML code it was used quite often, because the fragment of text enclosed in it received a horizontal indent, which was not so easy to do at that time due to the impossibility of using CSS properties. The Blockquote element is paired and can contain both inline and block tags (for example, P paragraphs).

Example

Example enclosed in Blockquote

Nowadays, the Blockquote tag is still used when designing text, but the appearance of quotes nowadays is usually set using CSS properties specified specifically for it in the stylesheet file of your design template. For example, in the case of my blog, in style.css you can find the following lines:

#content blockquote(margin:15px 0 20px 0;padding:5px 8px 5px 35px;background:#eaedf0 url(images/quote2.png) no-repeat left top;background-position:8px 5px;color:#666;font- size:14px;width:91%;font-style:italic;) #content blockquote p(color:#666;font-size:14px;)

Well, you can see how the quotes included in Blockquote will look in the text of the article with an interview with the manager.

In addition to the quote in Html earlier (before the advent of CSS), another formatting tag was quite widely used - Center. It is paired (a kind of container) and block. It can contain any text elements (both line and block), which as a result of this action will be aligned to the center.

So, now let's look at the tag Pre, which allows you to transfer text formatting specified directly in the source code. Remember I said that all consecutive in (space, tab and line break) will be replaced by a single space when parsing the code in the browser.

So, the element Pre disables shortening whitespace characters in the section of text that will be enclosed in it. What is noteworthy is that for a fragment enclosed in Pre, the browser will not automatically break lines using whitespace characters.

Those. all lines inside the Pre element will be considered continuous by the browser - as you wrote in the code, this is how it will be displayed in the browser. Moreover, in the browser, to display a section of text formatted using the Pre tag, a monospaced font, such as Courier New or similar, will be used.

Formatting in the source code tag Pre tags are outdated

The Pre tag itself is block-level, and inside it (this tag is paired) only inline content can be contained (i.e., paragraphs P, headings H1 - H6, etc. should not be placed inside it).

Html has another block tag that is designed for text formatting - Address. According to validator standards, only inline content can be located inside this tag, which will be displayed in italics in the browser.

Font - working with text color and font in pure Html

Strong, Em - tags for logical and visual highlighting in the text

If CSS did not exist now, then I would have to describe the purpose of certain logical and physical (visual) text formatting tags. But, because CSS is now already used on the vast majority of sites, the role of such tags in Html code has already been practically reduced to zero, so I will just quickly go through them and explain why they were used before (and some are still used now).

Visual tags are designed to change the style of text that will be visible to visitors to your site, but which search engines should not pay any special attention to.

Logical text formatting tags, in theory, are oriented to indicate any accents for search engines. For the user, highlighting with these elements will also change the appearance of the highlighted words.

If you remember, not so long ago, optimizers were advised to highlight significant places with keywords (as they should be highlighted) with Strong and EM logical formatting tags, which to the user will look like regular bold and italics.

But for highlights without keywords, it was recommended to use Html elements “B” and “I”, which again would look like bold and italics to users, but were not taken into account by search engines, because they are not logical formatting tags.

Now all this practically no longer works as intended, and we do the selection of keywords using Strong and EM more out of habit, rather than really hoping for certain dividends for this from search engines.

So, in addition to the already mentioned “B” and “I” (in bold and italics) to the category visual formatting These include Font, Pre, already discussed at the beginning of the article, as well as tags:

1. "U" - underlining
2. "Strike" - crossing out
3. "Sup" - superscript
4. "Sub" - subscript
5. "Tt" - monospace font
6. “Big” - increase the font
7. “Small” - reduce the font

Well, now let's look at the list of elements logical formatting text:

1. “Em” - logical highlighting of important fragments in italics
2. “Strong” is the same, but it will only stand out in bold
3. "Cite" - italicize quotes
4. “Code” - designed to display various codes with a monospaced font
5. “Samp” - to highlight several characters with a monospace font
6. “Abbr” - the Title attribute of this tag contains the decoding of an abbreviation (such as CSS or Html, which are read by letters, and not as a single word). The words written in the Title will pop up when you move the mouse cursor over this abbreviation.
7. “Acronym” is the same thing, but is used for acronyms, i.e. abbreviations that are read not by letters, but as a word (for example, MKAD or Gai)
8. “Kbd” - used to display text entered by the site user from the keyboard in a monospace font
9. "Var" - used to italicize variables in some code
10. “Del” - highlighting with a strikethrough when you want to show that some fragment was deleted after publishing the Html document
11. “Ins” - underlining when you need to show that some piece was inserted after the publication of the Html document

I repeat once again that these formatting tags for the most part are very rarely found when writing code now, but still it is not superfluous to know their purpose.

Good luck to you! See you soon on the pages of the blog site

You might be interested

Whitespace characters and their formatting of code in Html, as well as special non-breaking space characters and other mnemonics
How colors are set in Html and CSS code, selection of RGB shades in tables, Yandex output and other programs Select, Option, Textarea, Label, Fieldset, Legend - Html tags for the form of drop-down lists and text fields
Lists in Html code - UL, OL, LI and DL tags
How to create a hyperlink (A, Href, Target blank), how to open it in a new window on the site, and also make a picture a link in Html code
Tables in Html - Table, Tr and Td tags, as well as Colspan, Cellpadding, Cellspacing and Rowspan for creating them
Tags and attributes of headings H1-H6, horizontal line Hr, line break Br and paragraph P according to the Html 4.01 standard
What is hypertext markup language Html and how to view a list of all tags in the W3C validator
Img - Html tag for inserting a picture (Src), aligning and wrapping text around it (align), as well as setting the background (background)
Comment directives and Doctype in Html code, as well as the concept of block and inline elements (tags)

Element (from English font- font) is a container for changing font characteristics, such as size, color and typeface.

This element is deprecated, please use styles instead.

Syntax

Text

Closing tag

Required.

Example

P The first letter of this sentence is written in Arial font, highlighted in red and enlarged in size.