How to make text italic in html? Italic with CSS: changing the font style of Italic text using CSS.

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 happen if the previous family is not set to operating system user.

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.

Greetings, Friends.

After another long break, I remembered that I hadn’t written a single line for a long time. Of course, there are reasons for this, because there will always be some reason to come up with an excuse, right? In fact, I do the Video Course every day, which I’ve already mentioned a couple of times, but for now I won’t say anything more about it, you’ll find out everything soon.

So, since nothing came to mind to write about. I decided to look at the statistics to see what interests RuNet users regarding HTML, WordPress, DLE and similar topics. And guess what? There is still something to write about. All the questions that I found seem to have answers, but not always in an understandable form. And in general it became interesting to write something like that.

Today we'll talk about HTML. Namely, we will talk about how to highlight text in bold and italics, and we will also talk about highlighting with color.

Making text bold.

To make text bold, you don’t need to do anything fancy with CSS styles or come up with any other complications. HTML already has this feature. At the same time, we can not only highlight the text in bold, but also put some emphasis on it using highlighting. The emphasis can be placed on search engines or any special browsers or programs. The main thing is not to overdo it with emphasis on text in an article or on a page with some information, as this can have a detrimental effect, at least on the promotion of this HTML page.

So, to simply make text bold, we can use the tag . This tag refers to elements of physical markup, while setting the text to bold without placing any emphasis on it. This tag is a paired tag, which means it has both an opening tag and a closing tag. Additionally, since the element is inline, it must be in some block element, for example
Sample code:

thumbnail

Result:

thumbnail

In this case, we simply highlighted the text in bold and that’s it.

But it happens, so we need not just to highlight the text, but to focus on it. For this we can use the logical markup tag . Not only does the text highlighted with this tag have more weight for search engines. But in theory it should be different from the tag in speech browsers, for example by intonation. However, I can neither confirm nor deny this information, is this true?

In this case, everything is exactly the same as in the case with a simple highlighting in bold, only we are making an emphasis, and not just highlighting.

Sample code:

Result:

It's all quite simple, isn't it?

Italicize text.

In this case, everything is no more complicated than in the first one. And our situation is absolutely the same. We can highlight text with two options in HTML. Again, using either a physical markup tag or a logical tag, with which we again focus on the selected text.

To make the text italic we will use the tag . This element is paired and inline, which tells us that we should use both an opening tag and a closing tag. They should also use it inside a block element. And in in this case the best block element is the paragraph tag
Sample code:

text in italics

Result:

text in italics

And of course, we can emphasize the text at the same time by highlighting it in italics using the tag . This item is the same as , except that the text is italicized and not bold.

Sample code:

the text we focused on

Result:

the text we focused on

And the last thing I would like to talk about today is highlighting text with color.

Unfortunately, we do not have a tag for highlighting text with color in HTML. But still, there is nothing complicated in this method.

So, to highlight a certain part of the text with color, we can wrap the desired part of the text with a tag , which is a generic tag and is used inside a block element. In our case block element is the tag
But add not enough. You also need to specify the style parameter, which will allow you to add CSS properties the required text, specify the property itself (color), which will help set a specific color. Finally, provide a value for the color property. But the question may arise: “What should I indicate?” You need to specify the HTML code of the color in which we want to “paint” the text. HTML color codes can be found.

Now, to make it clearer, let's look at an example.

Example code.

text to highlight color

In this case, we highlight one word: with color. I also want to note that the tag is paired and we have to close it where the property should end.

Result:

text to be highlighted

In these simple ways we can manipulate the text on our page. I would also like to note that everything we just talked about works on both WordPress and DLE, because any engine uses HTML to display pages. That is why HTML can be called the basis of any website, no matter what CMS you have.

I hope I explained everything clearly.

Good luck, Friends. Soon... There will be interesting news...

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 of 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
font-style
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.

Now we will study the main tags. Let's start with what tags are required on the page, forming its structure.

Block. Simple page structure

A website page is a regular text file with the extension .html. Inside this file it is stored HTML text pages with tags. This file must have the following tags: tag , which should contain the text of the entire site (everything written outside this tag will be ignored by the browser), and inside it there should be two more tags: tag for service page content and tag - for the main text, which is visible on the browser screen.

Into the service content, which is located inside the tag , there are many different things included, but for now we only need two of them. This is a tag , which specifies the title of the page, which will be visible in the browser tab, and the tag <meta>, which specifies the page encoding (it is placed in the attribute charset and usually matters utf-8, more about this in the video, which will be a couple of paragraphs lower). Also, before the tag <html>the construction is usually written doctype, which indicates the version of HTML in which the site is made. The current version of the language is number five and the doctype for it should look like this -<!DOCTYPE html> . So let's look at the basic structure of the page (to run this example in a browser, copy it into a text file with the extension .html and open in a browser, if you have problems with this, watch the video below the example): <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>This is the title title This is the main content of the page.
See this link to see what this example looks like in a browser.

I think after you've read about the basic structure of a page, you're still a little confused about what it all looks like in practice. Therefore, I made a special video in which I will show you how to make your first HTML page and run it in the browser (in it I will also talk about the title of the page, about encodings, about code design). Watch it and only then proceed to further reading:

Well, now, having learned how to create the simplest pages, we will move on to studying useful tags that should be used inside the tag . These will be tags for paragraphs, headings, lists, links and other useful things. So let's get started.

Block. Paragraphs

One of the main elements of the page is paragraphs. They can be compared to paragraphs in a book - each paragraph begins on a new line and has a so-called red line (this is when the first line of the paragraph text is slightly indented to the right). By default there is no red line, but it is easy to create (more on this later).

A paragraph is created using a tag
Thus:

This is the title title
This is a paragraph.

That's one more paragraph.

And one more paragraph.

This is a paragraph.

That's one more paragraph.

And one more paragraph.

Block. Headings h1, h2, h3, h4, h5, h6

In addition to paragraphs, important things on the page are headers. They can also be compared to headings from a book - each chapter has its own heading (the title of that chapter) and is divided into paragraphs, which also have their own headings. Well, the main text of the page is located in paragraphs.

Headers are created using tags
,
,
,
,
,
. They have varying degrees of importance. In the title h1 should be located title of the entire HTML page, V h2- Name blocks pages, in h3- the name of the subblocks and so on.

All headers are bold by default and have different sizes (this can be changed via CSS, but more on that later). See example:

This is the title title
Heading h1

Heading h2

Heading h3

Heading h4

Heading h5

Heading h6

This is the first paragraph.

This is the second paragraph.

This is the third paragraph.

This is how the code will look in the browser:

Heading h1

Heading h2

Heading h3

Heading h4

Heading h5

Heading h6

This is the first paragraph.

This is the second paragraph.

This is the third paragraph.

Block. Fatty

You already know that headers are by default fatty. However, you can make regular text bold - just put it in a tag . See example:

This is the title title
This is normal text, and this is fatty text.

This is how the code will look in the browser:

This is normal text, and this is fatty text.

should be used inside some other tag, such as a paragraph. In this case, paragraphs create the overall structure of the page (paragraphs and headings), and the tag b makes individual pieces of text bold.

Block. Italics

In addition to fatty, you can also make italics using tag :

This is the title title
This is normal text, and this is italic text.

This is how the code will look in the browser:

Block. Lists

Along with paragraphs and headings, there is another important element of the page - this lists. Such elements are probably familiar to all Internet users. They represent a listing of something (list) point by point. Next to each item on the list there is usually a filled circle (it’s called marker list).

Lists are created using a tag
, which must contain tags
. Tag ul specifies the list itself, and the tags li list items should be placed (that is, one li corresponds to one list marker). Please note that li tags cannot be used separately. See example:

This is the title title

First item on the list.

Second item on the list.

Third item on the list.

This is how the code will look in the browser:

First item on the list.

Second item on the list.

Third item on the list.

Lists created via tag ul, are called disordered lists. This name was given to them because there are also ordered lists that have number markers instead of dot markers. Such lists, instead of the ul tag, have the tag
, and items of such lists are also created through tags li.

Let's make an ordered list using tag ol:

This is the title title

First item on the list.

Second item on the list.

Third item on the list.

This is how the code will look in the browser:

First item on the list.

Second item on the list.

Third item on the list.

The convenience of ordered lists is that I can insert a new list item anywhere - and the numbering will rearrange itself (that is, I don’t have to keep track of it in case of any changes, as would be the case if I arranged it manually ).

Block. Links

Links are the elements that make the Internet an Internet. By clicking on links, we can move from one page of the site to another. If they didn’t exist, the Internet would be just a collection of pages not connected to each other in any way.

This is the title title Link to phphtml.net site.
This is how the code will look in the browser:

There are links absolute And relative, in addition, they can lead both to your site and to someone else’s. It is better to show these difficult moments rather than describe them in text, so I made the following video for you. Watch it and only then proceed to further reading:

Block. Images

Let's now figure out how to place image on your website page. This is what the tag is for having a required attribute src, which stores the path to the image file.

Let's see how this works in the following example:

This is the title title
This is how the code will look in the browser:

Please note that the tag does not require a closing tag.

Block. Links in the form of pictures

Link there may be not only text, but also picture- a tag is enough for this put in tag , as done in the following example. Click on the picture and you will follow the link to the phphtml.net website (to then return back to the book, click the “back” button in the browser):

This is the title title
This is how the code will look in the browser:

Block. Line break

Remember what will happen if, for example, you make two paragraphs side by side - in this case, the text that lies in each of them will begin with new lines.

Let's see this with the following example:

This is the title title
This is the first paragraph.

This is the second paragraph.

This is how the code will look in the browser:

This is the first paragraph.

This is the second paragraph.

There are, however, situations where we would like to have one paragraph, but some text in it starts on a new line. Why might this be needed? For example, I want to type a poem, but I don’t want to break each line into a separate paragraph, since that wouldn’t be very logical.

To do this, in the place where there should be a line break, you should write a tag
. Please note that this tag is special and does not have a closing tag.

Let's see how it works using the following example:

This is the title title
This is the first line of text,
and this is the second one.

This is how the code will look in the browser:

This is the first line of text,
and this is the second one.

Block. HTML comments

Almost all programming languages have such a concept as “comments”.

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. The point 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)

Kittens "adopted" by pet rabbit

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.

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 was nothing more than crossed out text. Now represents information that has lost its relevance.
We also have an element , the default result of processing in visual user agents is strikethrough text. It means changes to a document, and at first glance their purpose may seem the same. However, there is a subtle point here. Let's look at an example of a product page in an online store.
It may indicate two prices, one of which is crossed out. We mark it with the element . This means that the old price has lost its relevance (it doesn’t matter when it was, the fact itself is important). How to check that it is not ? implies changes made to the document(the important thing is that at some point in time the document was changed). In our case, the new document already contains irrelevant information.
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, except are not even invalid. In addition, HTML5 was designed with backward compatibility in mind, and the same applies to the new semantics of old elements. Nothing has changed radically, but only a semantic spice has been added.