For several lessons now we have been getting more sophisticated 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, and to be more precise, we can:

• Display 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 upper case by creating a corresponding rule in the CSS file. And this is just one of many possible situations.

text-transform property

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.

The main thing is not to panic...

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.

Capitalize

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:

Everything with a capital letter...

Lower case - apply to all

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.

Web page with lowercase enabled

Capitalize 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 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.

Text after applying capitalize

Finally, let's take a quick look at the last value - none. As I 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 social networks so that more people can 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!

CSS allows for flexible customization of text, which 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 font case. This option is supported by all modern browsers and is included in the specification of all versions of CSS.

Purpose

The “text-transform” property can take three main values ​​and two additional ones. For example, you can assign uppercase to all selected text. Or you can give the command 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 assignment method to use is up to you. "Text-transform" can take the following values:

• Uppercase. Makes all selected characters capitalize. Uppercase is a common value in CSS because it helps 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 upper case. The remaining characters will not change.
• None. Allows you to undo all assigned values ​​(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

Using CSS, uppercase (or similar effects) are set with one simple command. Therefore, there is no need to change or rewrite all the text. If we are talking about a one-page site, then this property may not be useful. But when you control a huge portal 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, you need to add the entry: “h2 ( text-transform: uppercase; )”, and then all second-level headings will be uppercase.

Peculiarities

Some may think that manually processing text and changing the font using the "text-transform" property makes no difference. But that's not true. If you manually change to capital letters (upper case), then when this information is copied from your site, the characters will remain unchanged. If you use CSS language, then everything happens differently. The “text-transform” property only changes the font visually for users. But in reality the symbols remain unchanged. This happens to all values ​​of this property. The copied information (text) will have the original case 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 one you want to use - lower or upper case, the main thing is not to forget the purpose. For example, if you need changes only 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 post, then it is best to manually change the case of all text. After all, sometimes readers do not notice such a font substitution. This is especially critical when it comes to important documents and similar information.

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 to create an index: ^{(from the English superscript) - superscript and _{(from English subscript) - lower index. 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

Characteristic equation of a surface of the second degree

λ ³- I ₁λ ²+I ₂λ - I ₃ = 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 stop using it altogether ^{And _{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

Polynomial of degree n

f(x) = a 0+a 1 x + ... + a n-1 x n-1+ a n x n

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

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

Definition and Use

Tag _{defines interlinear 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.}

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

Browser support

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

Differences Between HTML and XHTML

Standard Attributes

Column DTD indicates in what type of document HTML 4.01/XHTML 1.0 DTD attribute is allowed. S=Strict, T=Transitional and F=Frameset.

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

Attribute	Meaning	Description	DTD
class	class_name	Specifies the class name for the element	STF
dir	rtl ltr	Specifies the text direction for content in an element	STF
id	identifier	Specifies a unique identifier for an element	STF
lang	language_code	Specifies the language code for the element's content	STF
style	style_definition	Specifies an inline style for an element	STF
title	text	Indicates additional information about an element	STF
xml:lang	language_code	Defines the language code for element content in XHTML documents	STF

More information about Standard Attributes.

Event Attributes

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

Attribute	Meaning	Description	DTD
onclick	script	Script launched on mouse click	STF
ondblclick	script	Double-click script	STF
onmousedown	script	Script to run when mouse button is pressed	STF
onmousemove	script	Script to run when the mouse pointer is moved	STF
onmouseout	script	Script to run when the mouse pointer moves outside of an element	STF
onmouseover	script	Script run when the mouse pointer moves over an element	STF
onmouseup	script	Script to run when mouse button is released	STF
onkeydown	script	Script run on keypress	STF
onkeypress	script	Script run when a key is pressed and then released	STF
onkeyup	script	Script to run when the key is released	STF

More information about