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:

  • Lower case
  • Upper case
  • Title case

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:

p{
text-transform: capitalize;
}

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.

p{
text-transform: none;
}

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 ValuesExplanationNotes
CapitalizeTypically, 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.
UppercaseAll 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.
LowercaseThis keyword value is the opposite of text uppercase in CSS.Converts the selected text to lowercase except for numbers and punctuation marks.
NoneThis 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-widthWhen 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-kanaThis 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 

<!DOCTYPE html>
<html>
<head>
<style>
div.a {
  text-transform: uppercase;
}

</style>
</head>
<body>
<h1>CSS Upppercase</h1>

<h2>text-transform: uppercase;</h2>
<div class="a">Vestibulum sed felis ut erat facilisis vestibulum id non libero.</div>


</body>
</html>

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


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.

LEAVE A REPLY

Please enter your comment!
Please enter your name here