How to make a beautiful font in html: sizes, colors, html font tags. HTML5: old tags with a new purpose What are the CSS properties for italic text
Description
Determines whether the font style is regular, italic, or italic. When text is set to italic or italic, the browser calls the system to find a suitable font. If the specified font is not found, the browser uses a special algorithm to simulate the desired type text. The result and quality may be unsatisfactory, especially when printing a document.
Syntax
font-style: normal | italic | oblique | inherit
Values
normal Normal text style. italic Italic style. oblique Italic style. Italics and italics, while similar, are not the same thing. Italic is a special font that imitates handwriting, while italic is formed by tilting regular characters to the right. inherit Inherits the value of the parent.HTML5 CSS2.1 IE Cr Op Sa Fx
Duis te feugifacilisi
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Result this example shown in Fig. 1.
Rice. 1. Applying the font-style property
Object Model
document.getElementById("elementID ").style.fontStyle
Browsers
Internet Explorer versions up to and including 7.0 do not support the inherit value.
Browsers always display text with the value oblique as italic.
Everyone knows that tags , , , are presentational, and therefore, based on the “structure, presentation, behavior” paradigm, their use is not encouraged. The elements seem much more familiar , , . This has been the case for many years of development practice. However, a lot has changed in the semantics of these elements with the advent of HTML5. Now we have 4 new tags with meaning and a mess in our heads.
vs
If previously all layout textbooks were full of phrases like “use instead of ”, and this was half true, then today such a habit can play a cruel semantic joke. But the thing is that the authors of HTML5 propose to use to highlight passages of text in order to attract the reader's attention, but without implying increasing the significance of the text or intonation. The specification provides examples of how keywords can be used to mark up a document.
The frobonitor and barbinator components are fried.
And leads (first paragraph of an article in journalism)
Six abandoned kittens have found an unexpected new mother figure - a pet rabbit. Veterinary nurse Melanie Humble took the three-week-old kittens to her Aberdeen home.
Kittens "adopted" by pet rabbit
In its turn , as before, means the increased significance of its contents.
vs
From now on contains text that stands out from the general environment, but has no emotional overtones. In my opinion, It is logical to use where typographic tradition requires italics (for example, words in a foreign language, terms, etc.)Per aspera ad Astra— translated from Latin, the saying means “Through thorns to the stars.”
it means emphatic stress, emotional emphasis on a given passage of text. This is the case when in speech we highlight words with voice (intonation, volume, etc.)
Execute it is forbidden, have mercy.
Read the contract carefully!
“Fine text” (information that is a legal formality, such as an enterprise license or legal address, etc.) we, as a rule, marked with an element with a class that specifies a smaller font in visual user agents. Now a new old one has appeared in our arsenal semantic element - .Holivar o
Earlier We also have an element
It may indicate two prices, one of which is crossed out. We mark it with the element
New semantics and old doctype
If for some unknown reason you cannot replace the doctype with a new one and are formally layout in HTML 4.01, do not despair. Use old new elements with new meaning and in time you will thank yourself. Perhaps someone will say that this is wrong, but these elements, exceptTag in HTML it is used to highlight a piece of text in italics.
HTML tag refers to physical formatting tags. Changing the font style using a tag is stylistic in nature.
You can also make HTML text italic using the tag. In this case, the text will be considered logically highlighted (in meaning), “underlined”.
The HTML5 specification recommends giving priority to logical formatting tags: important text fragments - tag, emphasis - tag, subheadings - tags, text highlighting - tag. Italicize text using a tag should only be used if the selection pattern does not match any logical formatting tags.
All types of text selection are described in the article:.
Syntax
text in italicsBrowser display
Usage example in HTML code
Simple text that can be placed on any website. And here is the text in italics(
In html, font size plays an important role. It allows you to draw the user's attention to important information posted on the site page. Although not only the size of the letters is important, but also their color, thickness and even family.
Tags and attributes when working with html fonts
Hypertext language has a wide range of tools for working with fonts. After all, text formatting is the main task of html.
The reason for the creation of the HTML language was the problem of displaying text formatting rules in browsers.
Let's look at the tags that are used to work with fonts in HTML and their attributes. The main one is the tag . Using the values of its attributes, you can set several characteristics of the font:
- color – sets the text color;
- size – font size in conventional units.
Positive attribute values from 1 to 7 are supported.
- face – used to set the text font family that will be used inside the tag . Several values are supported, separated by commas.
Only the text that is located between the parts of the paired font tag is formatted. The rest of the text is displayed in the standard default font.
Also in html there are a number of paired tags that specify only one formatting rule. These include:
- — sets bold font in html. Tag similar in action to the previous one;
- — the size is larger than the default;
- — smaller font size;
- — italic text (italics). Similar tag ;
- — text with underlining;
- crossed out;- — display text only in lower case;
- - in upper case.
Plain text
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
3) font-style – sets the font writing style. Syntax:
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
4) font-variant – converts all capital letters to capital letters. Syntax:
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
5) font-weight – allows you to set the thickness of the text (saturation). Syntax:
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.
font:icon
font:caption
font:menu
font:message-box
small-caption
font:status-bar
font:italic 50px bold "Times New Roman", Times, serif
To set the font color in HTML, you can use the color property. It allows you to set the color, either using a keyword or in rgb format. And also in hexadecimal code.
To make our WEB page look more presentable, we will divide the text into paragraphs and highlight the title. HTML has 6 levels of document section headings, numbered 1 to 6. Headings are declared by a pair of tags with numbers corresponding to the level, for example,
- the title of the first level section, and - the title of the sixth level section. Titles differ from regular text in the size and width of the letters. The first level heading h1 is usually displayed in a very large font, while the sixth level heading h6 is usually displayed in a very small font.Titles
Do not confuse document section titles with the previously discussed document title, defined by the element
.We use the first sentence as the title of the text - To do this, it’s enough to limit it with tags
And
.Insert tags into the text of the other.html file
And
so that they limit the first sentence of the text, and this piece of code takes the following form:Welcome to the SD company page!
Let's look at the acquired result.
Save the file by selecting the Notepad menu command File - Save.
The saving operation must always be done before viewing the document, because it opens the file for viewing by loading it into the computer’s RAM from disk. If you do not save the file after editing the HTML code, you will not see any configurations in the browser.
Restore the browser window by clicking its button on the Taskbar.
Press the F5 button or the Refresh button on the toolbar of the program's working window. The other.html file will be reloaded and you will see what the first level header looks like in your browser window.
See how the titles of the other 5 levels will look by changing the numbers in the tags: h2, h3, and so on. After each configuration, do not forget to save the file and update the image in the browser window.
When you finish the experiments, restore the tags in the other.html file again
.Using the 6 levels of headings that it puts at your disposal HTML language, you can do it simply readable document with an intuitively clear structure. Remember that your document will always be much better read if it is clearly divided into sections and subsections.
Heading Alignment
By default, the title is aligned to the left edge of the page. But it can also be aligned to the right or centered. For right alignment in a tag
The attribute align="right" is used, and for centering - align="center". An obvious indication of left-side alignment is also allowed - align="left".
Add to tag
align="center" attribute to center the title. This element should look like this:
Welcome to the SD company page!
In the future, we will not remind you of the need to save the file with the initial code and refresh the image in the browser before viewing.
How to make text highlighted (bold) in HTML
Now let's move on to the rest of the text. Let's increase its size and make the text bold italic. To set bold style, paired tags are used .
Insert the opening one in the other.html file and closing tags so that they limit the text. Here you will find out... This element should take the following form:
How to make text italic in HTML
Italic style is set using tags .
Insert an HTML tag into the initial code And so that the edited element takes the following form:
Here you will learn about our activities, software products about our company and about the equipment we produce
Markup elements can be nested, as in this structure, where the element … nested within an element …. Modern browsers are able to correctly handle nested tags. Therefore, you need to ensure that the order of investment is not violated. The browser will be difficult to operate if the nesting is broken. For example, this entry would be incorrect: …. Compliance with nesting is a very important part of the general culture of writing HTML code.
How to make text underlined in HTML
Using a couple of tags you can set the underlined style of a text piece limited by these tags, and using a pair of tags - show text in teletype font.
It should be noted that recently the tag simplified and emphasized using styles. equivalent . Yes new analogue looks more cumbersome, but unfortunately it is more accurate. The main thing in favor of this is that the bulky version is cross-browser, in other words, suitable for all browsers, when Not all browsers support it.
How to increment text in HTML
Now let's increase the text font size. This can be done using various methods.
Tags increase the font size of the text enclosed between them.
Add tags to the beginning and end of the above piece of code, respectively And so that the element takes the following form:
Here you will learn about our activities, about the software products of our company and about the equipment that we produce
Using tags you can reduce the text font size compared to the initial one.
Another method of specifying font size is using tags with the size attribute. Integers from 1 to 7 are used as values for this attribute. In this case, value 1 corresponds to the smallest font size, and value 7 corresponds to the largest.
Using instead of tags view tags , see how the text font size changes for different values of the size attribute - from 1 to 7.
You can also use numbers from 1 to 7 with a + (plus) or - (minus) sign as the value of the size attribute. In this case, the font size increases or decreases accordingly, compared to the initial one, for example, tags The font size will increase by one level compared to the current one. Check it out.
Set 5 as the value of the size attribute for the piece of text in question: . The HTML code for this piece should be like this:
Here you will learn about our activities, about the software products of our company and about the equipment that we produce.
In tags The color attribute can also be used to specify the color of the font limited by text tags. The meanings of this attribute are the same as for the previously discussed attributes that describe the color of the background and text of the document.
By default, the paragraph with the text Here you will find out... is aligned to the left. Center it horizontally using tags
Insert tags
Please note that we used tags to center the paragraph
Attention! For 2010 tags ,
=
=
There are also a huge number of other outdated tags that cannot be outlined in this article, so it is better to immediately familiarize yourself with specialized WEB sites on this issue. But I posted the main ones here a little higher
Allocation codes
The HTML language allows two approaches to font selection of text fragments. On the one hand, you can directly indicate that the font on a certain section of the text can be bold or italic; in other words, you can clearly indicate the font style of the text, as we did in this experiment. On the other hand, you can mark any piece of text as having some logical style that is different from the usual one, leaving the interpretation of this style to the browser. Thus, the logical style shows the role of a text piece, for example, its enormous significance in comparison with ordinary text, or the fact that this piece is a quotation. In your own work, you can use subsequent tags that define logical styles. Check how they work in different browsers.
- used to define a word. Text is displayed in italics by default.
- to highlight words and strengthen them. Text is displayed in italics by default.
- to highlight the titles of books, films, performances, and so on, it is displayed in italics by default.
- for program code fragments. Shown on the display in a fixed width font.
- used for text that the user enters from the keyboard. May appear in different fonts in different browsers. Tag is obsolete.
- serves to display program messages. Displayed in a fixed width font. Tag is obsolete.
- for particularly important fragments. Usually highlighted in bold.
- used to indicate that a piece of text or a word is a symbolic variable, in other words, text that can be replaced by different expressions. Displayed in italics by default. Tag is obsolete.
The HTML 4.0 specification offers a more advanced method of specifying styles for text and other parts - using a special language called CSS (Cascading Style Sheets). Style sheets are a huge achievement in the field of WEB design, expanding the ability to improve the appearance of pages. Style sheets make it easy to define line spacing, padding, colors used for text and background, font size and style, and so on. Most parts of HTML can be styled using a style attribute, which is placed inside an element's opening tag. Pairs of the form “property: value” are used as the value of the style attribute. For example, in a piece of code describing the section header,
the style="color: blue" attribute specifies that the color property has the value blue, in other words, the first level heading text should be displayed in blue.
Alignment with styles
Let's see how to use the Cascading Style Sheets language to specify the style of a text piece that begins with the words Here you will learn...
To specify the font thickness, use the font-weight property with the values lighter (narrow), bold (semi-bold), bolder (bold), for example, style="font-weight: bold".
To determine the italic style, use the font-style property with the value italic. Therefore, to give the text a bold italic style, you should find the style attribute like this: style="font-weight: bold; font-style: italic". Please note: characteristics can be placed in any order and must be separated by a semicolon.
If you need to specify the font size, you should use the font-size property, the values of which can be specified in relative or absolute values. Relative values are percentages, and points (pt), pixels (px), centimeters (cm), millimeters (mm) are used as absolute values. Eg:
style="font-size: 200%"
style="font-size: 16pt"
style="font-size: 100px"
By specifying absolute rather than relative sizes, you deprive users viewing your pages of the ability to increase or decrease font size using the browser menu command in accordance with their vision and monitor resolution. Fonts will only be displayed in the size you specify. Therefore, it is better to specify the font size as a percentage. In this case, the font size will be smaller or larger by the indicated number of percent than when it was designed with HTML help default tag.
To determine the horizontal text alignment method, use text-align property with the values left (left), right (to the right), center (center), justify (width). Thus, to indicate that the text Here you will learn... should be formatted in bold italic style with a size of 150% of the original and aligned to the center, its style should be found as follows:
style="font-weight: bold; font-style: italic; font-size: 150%; text-align: center"
We will use this attribute in tags<р>, which allow you to present text as a separate paragraph.
Edit HTML element, including text Here you will find out... by removing tags
<р style="font-weight: bold; font-style: italic; font-size: 150%; text-align: center">Here you will learn about our activities, about the software products of our company and about the equipment that we produce
You see, HTML allows for a variety of styling techniques. At the same time, the use of the cascading table language CSS styles is more desirable.
Other alignment and styling options
We've only seen one use case for stylesheet language, where the style definition is placed specifically within the tag of the element you're describing.
This is done using the style attribute, which is used with most standard HTML tags. But there are other uses for CSS.
In standard HTML, without introducing style sheets, in order to assign certain parameters to any element, such as color, size, position on the page, and the like, you have to outline these characteristics for each element every time, even if 10 pages must be placed on one page. ki of such parts that do not differ from one another. You have to insert the same piece of HTML code into a page tens of times, increasing the file size and the time it takes to download it from the Internet.
Style sheets work in a different, more comfortable and economical way. To assign certain characteristics to an element, you must outline this element once and find this description as a style, and then simply indicate that the element that you want to design appropriately must take on the characteristics of the style you described. Comfortable, isn't it?
Moreover, you can save the style description not in the text of your WEB page, but in separate file- this will allow you to use the style description on any number of WEB pages. And another related advantage is the ability to change the design of any number of pages, correcting only the style description in one separate file.
In addition, the language of style sheets allows you to work with the font design of pages even more the highest level than standard HTML.
Currently, the CSS language has a fairly large number of parameters for parts of HTML that it can control. By using “safe”, in other words compatible with the largest number browsers CSS elements- font characteristics, colors of parts and background, characteristics of text and borders - you can significantly facilitate your work and make your WEB pages more attractive in terms of text design.
