CSS allows flexible customization of the text that is presented using the HMTL language. Today we will look at the effect of the "text-transform" property, which makes it possible to change the case of a font. This option is supported by all modern browsers and is included in the specification of all CSS versions.

Appointment

The "text-transform" property can take three main values \u200b\u200band two additional ones. For example, you can assign an upper case to all selected text. Or you can give a command to the opposite of the previous property, where all characters become lowercase. You can make an appointment using any method convenient for you. For example, using inline styles. Or you can create

A separate file with a description of all properties. Which way of assignment to use is up to you. "Text-transform" can take the following values:

• Uppercase. Capitalizes all selected characters. In CSS, uppercase is common, as this value can help solve many complex text-related problems.
• Lowercase. This property is completely opposite to the uppercase command.
• Capitalize. Changes the case of the first letter to uppercase. The rest of the characters will not be changed.
• None. Allows you to cancel all assigned values \u200b\u200b(needed to predefine a property). Typically, this value is set by default.
• Inherit. Inherits all properties from the parent element. It should be noted that IE does not support this property.

Application

With CSS, uppercase (or similar effects) are set with one simple command. Therefore, there is no need to change or rewrite the entire text. If we are talking about a one-page site, then this property may not be useful. But when you have a huge portal under your control, where you need to correct the case of letters in certain fragments, then "text-transform" becomes the only effective tool. For example, you need to fix the font in the "h2" heading tags. To do this, add the entry: "h2 (text-transform: uppercase;)", and then all second-level headings will be uppercase.

Features:

Some may think that manually manipulating the text and changing the font using the "text-transform" property makes no difference. But this is not the case. If you change it manually to uppercase (uppercase), then when copying this information from your site, the characters will remain unchanged. If you use CSS, things are different. The "text-transform" property only visually changes the font for users. But in reality, the symbols remain unchanged. This happens with all values \u200b\u200bfor this property. The copied information (text) will have the original case, which is used in the source code of the page. This is the only difference between manual processing and using CSS commands.

It doesn't matter which you want to use - lower or upper case, the main thing is not to forget the purpose. For example, if you only need changes for decorative purposes, then you can safely use the "text-transform" property. Well, if you know that your users will probably copy the information you have posted, then it is best to manually change the case of all text. Indeed, sometimes readers do not notice such a font change. This is especially critical when it comes to important documents and similar information.

For several lessons now, we have been hard at work with formatting text using CSS, and this time we are learning how to change the case of text. In this regard, cascading style sheets open up very wide possibilities for us, or more precisely, we can:

• Display all text in capital letters;
• Select all text in lowercase letters;
• Make the first letter of each word start with uppercase.

"This is all good, of course, but when might you need it?" - you ask. Imagine a situation where you want to display all menu items in capital letters. To do this, you do not need to type them, including the CapsLock key, or while holding down the Shift key. 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.

The text-transform property

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

But in practice, everything is quite simple, as you will see now. The key is to choose the right selector, because the values \u200b\u200bof the text-transform property are inherited.

Highlighting in capital letters

The first thing I suggest is to capitalize all the text, 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 how it looks in real life:

Lower case - apply to all

In the next step, let's apply lowercase letters everywhere, for which we write the following:

Body (text-transform: lowercase;)

As you may have guessed, the two meanings we just met are somewhat antonyms. And in the illustration below, you can see the result of the newly created property.

Uppercase the first letter of each word

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 will not 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 said, it can be used to reverse inheritance from a parent. For example, let's imagine that we have all the previous rules, and for paragraphs we should cancel them, for this we write the following:

P (text-transform: none;)

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

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

On this I am not saying goodbye to you. Thank you for your attention and see you in the following publications!

Hello. Sometimes, when creating web pages, you need to set some words using css to uppercase or superscript position. Let's see how this is done.

Upper and lower case with css

In general, today you can enclose the desired text in tags _{^{and get the display you want, but let's also see how this can be done with css, because the technique is slightly different.}}

For example, you need to write the formula H 2 O in an html document. This is done like this:

• The formula itself is written
• Those words and numbers that need to be displayed in the superscript or subscript are enclosed in a span tag, which needs to be assigned a class. For example: characters to be output
• In css, you need to set this element:

  Top-index (
  Vertical-align: super;
  }

This property is responsible for the vertical alignment of the text. Its super value specifies that the text is displayed as superscript. But the font size remained the same as for regular text. To make things look nicer, you also need to set the font size slightly smaller using the font-size property.

This is how the property simply works. Accordingly, to display in subscript you need to write like this:

Top-index (
Vertical-align: sub;
}

The difference from similar html tags is that these rules do not change the font size, so if you need to do this, you will have to register the new size in the stylesheet.

That's all you need to know about superscript and subscript in css. The property does not provide any additional opportunities, and they are not needed either. If you wish, you can somehow customize this text, but this is rarely necessary.

Where can it come in handy

Superscript and subscript text can be used when writing formulas, adding notes and marks to articles. For example, Wikipedia provides sources and notes for each article. In the course of the article, they are placed in the form of small superscripts. This does not annoy readers and at the same time allows you to give the articles the desired look.

The property is fully cross-browser and supported in all versions of CSS.

HTML Tags _{and ^{- Subscript and Superscript Text}}

Definition and Use

Tag _{defines subscript text. The subscript is half the height and appears below the baseline. Subscript can be used when writing chemical formulas such as H 2 O.}

Tag ^{defines superscript text. Superscript text is half the height and appears above the baseline. Superscript text can be used when writing footnotes like WWW.}

Browser Support

Tags _{and ^{supported by all major browsers.}}

Differences Between HTML and XHTML

Standard Attributes

Column DTD specifies in which document type HTML 4.01 / XHTML 1.0 DTD the attribute is allowed. S \u003d Strict, T \u003d Transitional and F \u003d Frameset.

Tags _{and ^{support the following standard attributes:}}

More information on Standard Attributes.

Event Attributes

Tags _{and ^{support the following event attributes:}}

Additional information about