CSS allows for flexible customization of text that is represented using the HMTL language. Today we 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.
Appointment
The text-transform property can take three basic values and two additional values. For example, you can assign an uppercase to the entire 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
separate file with a description of all the properties. Which appropriation method to use is up to you. Text-transform can take the following values:
- Upppase. Makes all selected characters uppercase. In CSS, uppercase is common because this value helps solve many complex text-related tasks.
- Lowercase. This property is completely opposite to the uppercase command.
- Capitalize. Changes the capitalization of the first letter to upper case. Other characters will not be changed.
- None Allows you to cancel all assigned values (necessary to predefine the property). As a rule, this value is set by default.
- Inherit. Inherits all properties of the parent element. It should be noted that IE does not support this property.
Application
Using CSS, uppercase (or similar effects) is set with one simple command. Therefore, there is no need to modify or rewrite the entire text. If we are talking about a one-page site, then this property may not be useful. But when under your control there is 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 header tags. To do this, add the entry: “h2 {text-transform: uppercase; } ”, And then all second-level headers will be uppercase.
Features
Some may find that manually processing text and changing the font using the “text-transform” property does not make any difference. But this is not so. If you manually change lowercase letters to uppercase (upper case), then when you copy this information from your site, the characters will remain unchanged. If you use the CSS language, then everything happens differently. The text-transform property only visually changes the font for users. But in reality, the characters remain unchanged. This happens with all values of this property. The copied information (text) will have an initial register, which is used in the source code of the page. This is the only difference between manual processing and the use of CSS commands.
It does not matter which one you want to use - lower or upper case, most importantly, do not forget the destination. For example, if you need changes only for a decorative purpose, then you can safely use the “text-transform” property. Well, if you know that your users will probably copy the information you posted, it is best to manually change the case of the entire text. Indeed, sometimes readers do not notice such a font change. This is especially critical when it comes to important documents and similar information.