Type to generate custom UI components with AI

Type to generate UI components from text

OR

Browse thousands of MUI, Tailwind, React components that are fully customizable and responsive.

Explore Components

Beginners Guide to Using Uppercase in CSS

This a complete guide to CSS uppercase. CSS is crucial for taking charge of the outlook of our webpage/website. An important tool in CSS is `text-transform`.

It allows developers to change how text looks in HTML by controlling capitalization and appearance. This guide will walk you through all the details, uses and best ways to use text transform in CSS.

Whether you’re just starting in web development or want to level up your skills, this article will give you a clear understanding of how CSS text changes work and how they matter in the real world of web design.

Here’s a video that teaches on text-transform:

PS: Engineers waste time building and styling components when working on a project, writing repetitive markup adds time to the project and is a mundane, boring task for engineers. PureCode.ai uses AI to generate a large selection of custom, styled UI components for different projects and component types.

The Basics of `text-transform` Property

In the realm of styling web content, the text transform CSS property holds a significant role in changing the appearance of text. It’s like a special tool that helps change the how text looks. What’s cool about it is that it can change text in different ways, giving you lots of options to make your web page look just right.

Purpose of `text-transform`

The `text-transform` property helps change how text looks without changing the actual words. It can do things like making text all uppercase, all lowercase, or capitalizing specific parts.

It is a way to easily change how text appears on a website without actually changing the words themselves.

Syntax and Usage

Let’s delve into the syntax. To use `text-transform` within your CSS stylesheets, simply apply it to the desired HTML element using the following structure.

.selector {
  text-transform: value;
}

The `value` here represents the text transformation you wish to apply. It can take various forms such as `uppercase`, `lowercase`, `capitalize`, `sentence case`, `and initial` just to name a few each influencing the text differently.

Practical Demonstration

Let’s bring this into context with a practical example. Consider the following HTML snippet:

<p class="uppercase-text">this text will be transformed</p>

Now, by applying the text-transform property in CSS:

.uppercase-text {
  text-transform: uppercase;
}

The result will showcase the element’s text in all capital letters, emphasizing the power of CSS text transform property.

Getting a grip on text transform property basics will open a door to a bunch of cool ways you can change the text on a website. We’ll delve deeper into these changes, looking at how each one affects text and the best ways to use them when building a website.

Exploring Uppercase Transformation

Understanding the ins and outs of different text transformations allows frontend developers to be able to use the `text-transform` property effectively. Let’s take a closer look at these transformations to see how each one changes the way text looks. By exploring them individually, we can understand how they impact the appearance of the text in unique ways.

Let’s begin by categorizing the text transforms

/* Keyword values */
text-transform: none;
text-transform: capitalize;
text-transform: uppercase;
text-transform: lowercase;
text-transform: full-width;
text-transform: full-size-kana;

/* Global values */
text-transform: inherit;
text-transform: initial;
text-transform: revert;
text-transform: revert-layer;
text-transform: unset;

Let’s go through the keyword values.

`none`

The `text-transform: none;` property resets any applied text transformation, ensuring the text displays in its original case without any modifications.
Take a look at the HTML code below which is a `<p>` tag with a class of `none-demo`

<p class="none-demo">This Text Will Maintain Original Case</p>

Adding a style to the code above;

.none-demo {
  text-transform: none;
}

Applying `text-transform: none;` ensures that the text maintains its original case, disregarding any previous transformations.

`uppercase`

When applying the `text-transform: uppercase` property, all the letters within the element transform into capital letters (uppercase). Take a look at the example below;

We have an HTML code with a class of `uppercase-demo`

<p class="uppercase-demo">This text will be transformed to uppercase.</p>

And the CSS:

.uppercase-demo {
  text-transform: uppercase;
}

The output will display the element’s text in capital letters.

`lowercase`

Conversely, using the `text-transform: lowercase` converts all the characters to lowercase letters. Let’s take a look at the example below;

As seen below the HTML has a class of `lowercase-demo`

<p class="lowercase-demo">This Text Will Be Transformed to Lowercase.</p>

and the CSS

.lowercase-demo {
  text-transform: lowercase;
}

This displays the element’s text all in lowercase.

`capitalize`

The `capitalize` transform property capitalizes–makes the first letter of each word in the element’s text uppercase. Let’s take a look at the example below:

For our HTML we have a `p` tag that has a class of `capitalize-demo`

<p class="capitalize-demo">capitalize each word in this sentence.</p>

the CSS looks like so;

.capitalize-demo {
  text-transform: capitalize;
}

This simple rule `capitalize` will make the first letter of each word capitalized.

`full width`

Think of narrow characters like half-width Latin letters or Katakana in Japanese—these characters can seem squeezed or cramped in a line of text. When you use `text-transform: full-width;`, it gently nudges these characters to take up more space, allowing them to occupy their full width. This creates a more even and uniform appearance within a line of text.

We have an HTML code with a `<p>` with a class of `full-width-demo`

<p class="full-width-demo">Transforming into Full-Width Characters</p>

We add a transform style to the HTML below

.full-width-demo {
  text-transform: full-width;
}

However, for characters that are already full-width, like many Japanese and Western characters, this transformation won’t make them wider. Instead, it ensures that they align nicely and harmoniously with other text, maintaining a balanced look across the entire line.

Getting the hang of how these transformations work gives developers the power to tweak text exactly how they want in their web projects. Next, we’ll go deeper into using these transformations with CSS for real-life web development situations.

Now let’s look into the global values

`inherit`

When a property in CSS uses the `inherit` value, it means that the element will take on the same setting as its parent element for that particular property. So, when `inherit` is used with text-transform, it means the text in that element will look the same as the text in its parent element – whatever transformation is applied to the parent will also apply to this element.

Let’s look at the example below where we have a `<div>` with class `parent` that wraps a `<p>` tag with class of `child`

<div class="parent">
  <p class="child">Inherited text-transform</p>
</div>

Our CSS will look like so

.parent {
  text-transform: uppercase;
}

.child {
  text-transform: inherit; /* Inherits 'uppercase' from parent */
}

This value allows an element to inherit the text-transform property from its parent element.

This helps keep the text consistent throughout a webpage, taking its style cues from the parent.

`initial`

Applying the `text-transform: initial` resets texts to its default case. Let’s take a look at the example below;

<p class="initial-example">This text will have its transform reset.</p>

and our CSS which looks like so;

.initial-example {
  text-transform: uppercase;
}

.initial-example {
  text-transform: initial; /* Resets to 'none' */
}

`revert`

So, let’s say you’ve changed how text appears, making it all uppercase or something similar. Using “revert” cancels that change and makes the text go back to how it would look if you didn’t make any changes at all. It’s like going back to the original style that the browser or the parent element has set for the text.

Let’s look at the example below where we have a `<p>` tag with the class of `revert-example`

<p class="revert-example">This text will be reverted.</p>

and adding our CSS which looks like so;

.revert-example {
  text-transform: lowercase;
}

.revert-example {
  text-transform: revert; /* Reverts to inherited or default value */
}

Essentially, “revert” undoes any local changes you’ve made, putting the text back to its default or inherited appearance.

`unset`

If there’s an inherited value for text-transform from the parent element, “unset” makes the current element adopt that inherited value. But, if there isn’t any inherited value, it behaves just like the “initial” value, which sets the text-transform back to its default state.

Let’s look at the example below where we have a `<p>` tag with the class of `unset-example`

<p class="unset-example">This text will be unset.</p>

and adding our CSS which looks like so;

.unset-example {
  text-transform: uppercase;
}

.unset-example {
  text-transform: unset; /* Resets to inherited value or 'none' */
}

So, “unset” is handy when you want to get rid of any changes made locally and let the element either take on the style from its parent or revert to how it looks by default. It’s like saying, “Hey, forget any changes I made here; let’s either go back to how my parent does it or start fresh with the default look.”

Implementation in CSS

Now that we’ve grasped the various transformations available with the `text-transform` property, it’s time to put this knowledge into practice. Let’s explore how we can seamlessly apply these transformations to HTML elements within your web projects.

Step-by-Step Guide

Implementing `text-transform` involves a few straightforward steps. First, identify the HTML element you wish to transform. For instance, consider a `<h1>` element as seen below:

<div class="container">
  <h1 class="heading-transform ">
   take your first step 
into safe, secure 
crypto investing
  </h1>

  <p class="paragraph-transform">lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempos lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempos</p>
</div>

We get the image below as the output, completely unstyled without any transforms.

output of the HTML without any styling

Next, we apply the styling that contains the styling for the HTML code we defined above.
First, we’ll start with the container, changing the font-family to a much more beautiful font. We used the font Clash Display.

.container {
   padding: 30px;
   font-family: 'Clash Display', sans-serif;
   background: #000;
   color: white;
}

Here’s what we have currently,

output of the container styling

Now, it’s time for us to add our transforms!

.container {
   padding: 30px;
   font-family: 'Clash Display', sans-serif;
}

.heading-transform {
  text-transform: uppercase;
  font-size: 50px;
  font-weight: 700;
}

Here’s what it will look like after we added the styling for the heading that included `text-transform: uppercase` amongst other styles.

output of text transform uppercase

We are going to change the `text-transform: uppercase` to `text-transform: capitalize`

.container {
   padding: 30px;
   font-family: 'Clash Display', sans-serif;
}

.heading-transform {
  text-transform: capitalize; // we made the change here 
  font-size: 50px;
  font-weight: 700;
}

After that change, we get the output as seen below.

output of text transform capitalize

We have been able to implement CSS text transform in a way that could be used in a real-life application.

Best Practices and Considerations

Making sure your text changes look good and are easy to read involves thinking about and using smart approaches. We’ll dig into important things to think about and the best ways to use the text transform property in CSS to make your text look great and stay readable.

Legibility and Readability

Changing how text looks can make it more attractive, but it’s important to make sure people can still read it easily. If you change the text too much, it might become hard for users to understand. It’s all about finding the right mix between making the text look good and making sure it’s easy for people to read and understand.

We can tackle readability and legibility issues when applying `text-transform` for uppercase, in the example below.

First, we define how our HTML will look like

<p class="uppercase-example">this text will be transformed to uppercase.</p>

And adding these CSS styles

.uppercase-example {
  text-transform: uppercase;
  /* Additional styling for better readability */
  letter-spacing: 1px;
  line-height: 1.4;
}

In this case, we apply `letter-spacing` and `line-height` adjustments along with the uppercase CSS transform so not only will the letters be legible but they will also be readable.

Handling Punctuation Marks

When you’re changing how texts look, things like periods, commas, and exclamation points might not behave as you expect. Pay attention to where these marks are and how they affect what the text means when you’re making changes.

For instance, if you use `text-transform: uppercase;` remember that punctuation marks will also turn into uppercase letters. This could change how your expression comes across or its intended meaning.

Addressing Language Specific Challenges

Various languages and writing systems follow different capitalization rules. For instance, in Turkic languages, there are specific and unique rules about when and how to use capital letters. To handle these nuances, it’s important to understand the particular capitalization rules of each language to ensure accurate and respectful text presentation.

Latin scripts

In Latin-based languages, like Spanish, French, or English, each language might have its own way of capitalization. For example, some languages might only capitalize the first letter in a sentence (sentence case), while others capitalize the first letter of each word that is important enough (title case). Knowing these differences helps make sure that the transformations we apply fit the specific rules of each language, making the text look right in its context.

  1. sentence case

    Although the sentence case transformation is not a native CSS text transform property it can be achieved by combining the `lowercase` and `uppercase` properties.

    The sentence case transformation, on the other hand, capitalizes the first character of every sentence.

    Let’s take a look at the example below.

    We have three `p` tags that represent three paragraphs and the sentence case is supposed to make the first character of every sentence uppercase.

    <p>use the title case transformation property on this text.
    </p>
    
    <p>use the title case transformation property on this text.
    </p>
    
    <p>this is an example of title case transformation.
    </p>

    We first use the `lowercase` property to make all the characters in the element lowercase and with the help of the `::first-letter` pseudoselector we can target the first letter of every sentence and set it to uppercase as seen below.

    p {
      text-transform: lowercase;
    }
    
    p::first-letter {
      text-transform: uppercase;

These points and examples demonstrate the strategies to address readability, punctuation, language-specific challenges, and variations in capitalization when using the `text-transform` property in CSS.

Supported Browsers for CSS text-transform property

text-transform PropertyChromeFirefoxSafariEdgeOpera
none
capitalize
uppercase
lowercase
full-width

Final Thoughts on CSS Uppercase

In conclusion, having a good understanding of text-transform property in CSS gives developers a lot of control over how the text looks. It’s not just about making text uppercase; it’s a tool that helps to make text easier to read, improves how your design looks, and ensures everyone can access and understand your content, no matter what device or browser they’re using.

Starting from simple changes like making text all uppercase to more specific and detailed techniques for different purposes, CSS text transformations are great because they’re not just easy to use, they’re also really versatile.

As you keep learning about web development, remember that knowing how text changes work gives you the ability to create websites that are engaging, easy to use, and look great for everyone who visits them. Understanding these little tricks helps you make web experiences that are interesting, accessible, and appealing to all users.

Here is another video by Net Ninja that we can use to gain more understanding of text transforms.

PureCode.ai can cater for your code development process. It will save you valuable time and effort on a project by providing customized, and ready-to-use components which will allow you to prioritize more important and thought-intensive tasks to speed up the development of your user interface.

Shadrach Abba

Shadrach Abba