text-transform

Capitalizing With CSS: CSS Uppercase and Lowercase Guide

Adding a CSS uppercase code saves you time and effort in manually transforming lowercase texts to uppercase. It may sound complicated and too advanced, but all you need to do is use CSS text-transform. Here’s everything you need to know about CSS upper case and text-transform.

What Is CSS Text-Transform?

You will use the CSS text-transform property if you have some text in an HTML element and want to capitalize it. Essentially, text-transform in CSS gives you the capability to convert any text to:

What Is the Syntax for Text-Transform?

Typically, you will need to define the HTML object where the text you want to transform lives. You will then type curly braces. Inside these curly braces is where you will place the text-transform property.

For instance, if we were to capitalize text in an HTML paragraph, the syntax would be:

As you can see, the styling has two parts separated by a full colon. The left side represents the property, while the right portion is the value. It is also worthwhile to note that you should conclude the line of code with a semicolon.

As a property, text-transform accepts the following values.

• None: This property ensures that your text does not transform into any capitalization. You can use it to retain the original case of your text.

• Lowercase: Transforms all text characters into lowercase.

• Capitalize: This value transforms the first letter of each word in the text selection or objects to uppercase.

• Uppercase: All characters in the text will be uppercase. It can be especially useful in writing catchy headings.

Uses of Text-Transform Property

• Text-transform gives you the ability to transform text through HTML object selection dynamically.

• Allows ease of capitalizing proper nouns. By using text-transform, usernames will be displayed as a proper noun.

• For blog posts and headers. Adding “capitalize” in text-transform can ensure blog post titles are in title case.

• Preventing change of text. You can also pass the value ‘none’ to the text-transform property to prevent your text from manipulation.

• Punctuation in sentences and paragraphs such as in blog posts news sites.

More on Text-Transform Values

In CSS, the syntax requires a property followed by a value. You will have to change property and value.

For instance, in our “capitalize” example, you see that the property we need to change is the text-transform. In regards to this property, we indicate that we want the transformation to be “capitalize.” To get a grasp of this, take a look at the following code.

Essentially, properties are the accessible characteristics of the HTML object that you can manipulate. In our example, the object is “p” or paragraph. Since our program hypothetically contains some text, we want this text to remain intact – remain unchanged in terms of text transformation.

Therefore, to communicate this through code, we use “text-transform: none;” When you compare the code from our first article, you’ll notice we only replaced “capitalize” with “none.”

To understand all the text-transform values, we will divide them into two general categories: Keyword and Global values. Global values include inherit, initial, revert, and unset.

Keyword Values

CSS text-transform keyword values include:

Keyword Values	Explanation	Notes
Capitalize	Typically, this value converts the first character in each word to uppercase. Other letters or characters remain intact and unchanged.	CSS capitalize does not affect any punctuation marks. They are ignored, and the first letter is capitalized.
Uppercase	All the characters or letters in a particular selection or HTML object are converted to uppercase with this keyword value.	However, marks and punctuation marks are left unchanged and intact.
Lowercase	This keyword value is the opposite of text uppercase in CSS.	Converts the selected text to lowercase except for numbers and punctuation marks.
None	This value prevents the letters’ case from being manipulated instead of other keyword values.	If you set your text-transform to none, the case stays intact despite injected changes.
Full-width	When you use this keyword as the value for your text-transform, the character’s writing is forced inside a square. Consequently, the characters are aligned.	This keyword is mainly used in Latin scripts and ideograms. A good example is the usage of this value in Chinese and Japanese Scripts.
Full-size-kana	This value is essential for compensating for legibility issues experienced primarily on ruby.	It converts the small-sized kana characters to full-size characters.

Example of CSS Uppercase

    div.a 
CSS Upppercase
 
text-transform: uppercase;
 
Vestibulum sed felis ut erat facilisis vestibulum id non libero.
   

In this simple code, we’ve assigned a div class to a Lorem Ipsum sentence. Notice the CSS code includes the sentence’s div identification instead of “p.” It is then followed by the “text-transform: uppercase;.”

If you convert this example code using an online CSS text editor, the text will become “VESTIBULUM SED FELIS UT ERAT FACILISIS VESTIBULUM ID NON LIBERO.”

CSS Uppercase Summary

In a nutshell, text-transform provides you with the ability to change the case of the text on your webpage. You can achieve CSS all caps by using the keyword “capitalize.” In addition, text-transform capitalize converts all the first letters in all words to uppercase. Other values you can use with text-transform include “none,” “lowercase,” “full-width,” and “full-size-kana.”

This post was proofread by Grammarly. Try it — it’s FREE!

Capitalize My Title is a dynamic title capitalization tool used to make sure your titles or headlines use proper capitalization rules according to various style guides include APA, AP, MLA, and Chicago. It also counts your words and checks for grammar issues.

Источник

CSS text-transform Property

The text-transform property controls the capitalization of text.

Default value:	none
Inherited:	yes
Version:	CSS1
JavaScript syntax:	object.style.textTransform=»uppercase» Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

CSS Syntax

Property Values

Value	Description	Demo
none	No capitalization. The text renders as it is. This is default	Demo ❯
capitalize	Transforms the first character of each word to uppercase	Demo ❯
uppercase	Transforms all characters to uppercase	Demo ❯
lowercase	Transforms all characters to lowercase	Demo ❯
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

Related Pages

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

text-transform

Управляет преобразованием текста элемента в заглавные или прописные символы. Когда значение отлично от none , регистр исходного текста будет изменен.

Синтаксис

text-transform: capitalize | lowercase | uppercase | none | inherit

Значения

capitalize Первый символ каждого слова в предложении будет заглавным. Остальные символы свой вид не меняют. lowercase Все символы текста становятся строчными (нижний регистр). uppercase Все символы текста становятся прописными (верхний регистр). none Не меняет регистр символов. inherit Наследует значение родителя.

HTML5 CSS2.1 IE Cr Op Sa Fx

       
Lorem ipsum dolor sit amet
 
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.
  

Результат данного примера показан на рис. 1.

Рис. 1. Применение свойства text-transform

Объектная модель

[window.]document.getElementById(» elementID «).style.textTransform

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit .

Источник