HTML superscript character. Html is - how to make text uppercase css. HTML Tags and - Subscript and Superscript Text

In the last video lesson we learned how to delete and add new information V new version HTML document, while reporting this search engines and highlighting visually so that visitors can also see the changes. For this, we used del and ins tags.

In this video tutorial we continue the topic of formatting text in an HTML document. We'll look at two HTML tags that indicate the superscript and subscript of text.

An HTML tag is designed to indicate the superscript of text in HTML. In some website topics, this tag will be simply irreplaceable. For example, if you have, or are planning, a website related to any formulas, mathematical or chemical. Or, if you have a construction-related site, then the tag will be very useful and will help when formatting articles, when writing formulas or any quantities, for example, square meters in construction topics.

But if your site does not relate to the listed topics, this does not mean that the tag will not be useful. It is enough to show imagination and ingenuity and find a use for this element.

As for the HTML tag, it is the opposite of the tag, and is responsible for indicating the subscript of the text. Subscript text can be used when writing formulas or mathematical equations. But besides this, perhaps you can find other uses for the tag.

The next Video Lesson is dedicated to two more tags, which in some situations can be simply irreplaceable. Moreover, they are capable of not only formatting text, for example, in an article, but also when indicating various information on the site during page layout. One of the tags carries out the translation into HTML, and the second draws a horizontal line.

The index relative to the text is the displacement of characters relative to the baseline up or down. Depending on the positive or negative value of the offset, the index is called upper or lower, respectively. They are actively used in mathematics, physics, chemistry and to designate units of measurement. HTML offers two elements for creating an index: (from English superscript) - superscript and (from English subscript) - subscript. Text placed in one of these containers is designated smaller than the base text and is offset up or down relative to it. Example 1 shows how these elements and styles can be used together to change the appearance of text.

Example 1: Creating a superscript and a subscript

Superscript and subscript .formula ( font-size: 1.4em; /* Formula text size */ ) sup, sub ( font-style: italic; /* Italic */ color: red; /* Red color of characters */ ) sub ( color: blue; /* Blue color of characters */ )

Characteristic equation of a surface of the second degree

λ3 - I1λ2 + I2λ - I3 = 0

In the example, both subscript and superscript appear simultaneously. To change the index font style, styles are used that set a uniform design (Fig. 1).

Rice. 1. View of indexes after applying styles

You can refuse to use them altogether in favor of styles. An analogue of these elements is the vertical-align property, which causes the text to be shifted vertically by a specified distance. Specifically, in Example 2 the value is 0.8em for the superscript and -0.5em for the subscript. Em is a relative unit equal to the size of the current font. For example, 0.5em indicates that the text should be shifted by half the font size.

Example 2: Using Styles to Manage Indexes

Superscript and subscript .formula ( font-size: 1.6em; /* Text size */ font-style: italic; /* Italic style */ ) .sup, .sub ( font-style: normal; /* Normal style * / font-size: 0.6em; /* Index size */ color: red; /* Superscript color */ vertical-align: 0.8em; /* Shift text up */ .sub ( color: blue; /* Color subscript */ vertical-align: -0.5em; /* Move the text down */ )

Polynomial of degree n

f(x) = a0 + a1 x + ... + an-1 xn-1 + an xn

In the example, the formula itself is displayed in an enlarged size, the superscript symbols are set in red, and the lower ones in blue (Fig. 2).

For several lessons now we've been getting more sophisticated with formatting text using CSS, and this time we're learning how to change the case of text. In this regard, cascading style sheets open up very wide possibilities for us, and to be more precise, we can:

• Show all text in capital letters;
• Select all text in lowercase letters;
• Make sure that the first letter of each word starts with uppercase.

“This is all good, of course, but when might it be needed?” - you ask. Let's imagine a situation where you need to display all menu items in capital letters. To do this, it is not necessary to type them, including the CapsLock key, or while holding down the Shift button. It will be enough to set all list items to display in uppercase by creating a corresponding rule in the CSS file. And this is just one of many possible situations.

We will control the case of the text using the text-transform property. It has 4 main values ​​- uppercase (capital letters), lowercase (lowercase letters), capitalize (upper case for each first letter of the word, other values ​​​​do not change), none (formatting is not applied). At first glance, all this may seem very complicated to you.

But in practice everything is quite simple, as you will now see. The main thing is to choose the right selector, because the values ​​of the text-transform property are inherited.

First of all, I suggest setting all text to capital letters, for which we create the following CSS rule:

Body ( text-transform: uppercase; )

In principle, nothing complicated, we just used the uppercase value. As they say, everything is intuitive. This is what it looks like in real life:

The next step is to apply lowercase letters everywhere by writing the following:

Body ( text-transform: lowercase; )

As you probably already guessed, the two meanings we just met are to some extent antonyms. And in the illustration below you can see the result of the newly created property.

To do this, we just need to use the corresponding value:

Body ( text-transform: capitalize; )

I don’t know how often you will use such a CSS rule, but it won’t hurt you to know about such a possibility, especially when solving non-trivial problems. The result can be seen in the image below.

Finally, let's take a quick look at the last value - none. As I already said, it can be used to cancel inheritance from a parent. For example, let’s imagine that we have all the previous rules in effect, and for paragraphs we should cancel them, for this we write the following:

P (text-transform: none; )

I dare to assume that everything is clear to you, if not, ask your questions in the comments. And that's all for me. I hope this CSS tutorial was helpful to you. If it is true:

• Repost this article on in social networks so that more people benefit from it;
• Subscribe to my newsletter so as not to miss useful and interesting blog posts.

This is where I don’t say goodbye to you. Thank you for your attention and see you in the next publications!

There is no cap clause option in CSS. Other answers suggesting text-transform: capitalize are incorrect because this option uses every word for every word .

Here rude A way to do this is if you want the first letter of each element to be uppercase, but that's definitely nowhere near the actual limits:

P ( text-transform: lowercase; ) p:first-letter ( text-transform: uppercase; )

THIS IS AN EXAMPLE SENTENCE.

THIS IS ANOTHER EXAMPLE SENTENCE.

AND THIS IS ANOTHER, BUT IT WILL BE ENTIRELY LOWERCASE. How to convert the letter UPPERCASE to lowercase and the first letter of Uppercase for each sentence as shown below only with?

using CSS

From: THIS IS AN EXAMPLE APPLICATION.

To: This is an example sentence.

Update: When I use text-transform: capize; The result is still the same.

You can't do this solely with CSS. There is a text-transform attribute, but it only accepts none , capitalize uppercase , uppercase , lowercase and inherit .

You might want to look into a JS solution or a server-side solution.

If you can make all characters lowercase on the server, than you can apply:

Text-transform: capitalize

I don't think text transform will work with capital letters as input.

If you want to use for this won't work, for or textarea you need to use Javascript

function capitaliseName() ( var str = document.getElementById("name").value; document.getElementById("name").value = str.charAt(0).toUpperCase() + str.slice(1); )

The tag defines subscript text. Sublinear text is half the height and appears below the baseline. Interlinear text can be used when writing chemical formulas, such as H 2 O.

The tag specifies superscript text. Superscript text is half the height and appears above the baseline. Superscript text can be used when writing footnotes, such as WWW.

Tags are supported by all major browsers.

The DTD column indicates in which document type the HTML 4.01/XHTML 1.0 DTD attribute is allowed. S=Strict, T=Transitional and F=Frameset.

Tags support the following standard attributes:

More information about Standard Attributes.

Tags and support the following event attributes:

More information about