CSS UPPERCASE: How To Use CSS Text-Transform
CSS is a markup language through which you can change the appearance and formatting of your text. The CSS UPPERCASE attribute ensures that all letters in the selected passage are rendered in uppercase rather than lowercase or title case. CSS UPPERCASE will still follow other formatting settings such as font and font sizes but will simply turn any lowercase letters into their uppercase variant.
By using this CSS/HTML attribute, you can change the formatting of any word in a string without having to change the text itself.
Let’s look at how to use this text transform capitalize function.
Why would you use CSS UPPERCASE?
There are a few instances where you might want to use the CSS UPPERCASE attribute. For example, if you wanted all of the text on your website to be uppercase, you could use this attribute on the <h1> tag to achieve that effect. You could also use it for headings or titles that you want to stand out from the rest of the text on the page.
Browser support for CSS UPPERCASE is nearly universal, with most modern browsers supporting it. However, there are a few older browsers that don’t fully support this attribute. If you’re worried about browser compatibility, you can use a library, such as Modernizr, to add support for CSS UPPERCASE to older browsers.
Often, CSS UPPERCASE is used to format text that has been input by a user. For instance, the user might enter the name “maria” and you might want to display it as “MARIA.”
How do you use text-transform UPPERCASE in CSS?
The CSS UPPERCASE function is actually the text-transform attribute. Let’s take a deeper look at the CSS text transform property and function.
For instance, to use text-transform on an H2, you’ll need to add the following line of code to your style sheet:
This will ensure that all text within the selected passage is rendered in uppercase. You can also use the text-transform function to convert text to lowercase or title case.
- Text transform lowercase: This will convert everything to lowercase.
- Text transform titlecase: This will use title casing on the text, modifying the first letter of each word.
Here’s an example.
- Original Text: hELLO wORLD
- Uppercase: HELLO WORLD
- Lowercase: hello world
- Titlecase: Hello World
So, if you want a capital letter at the front of each word, you would use the “text-transform: titlecase” attribute.
Why are uppercase letters important?
Capital letters are important because they can change the tone and design of a sentence. For example, take the sentence “I’m going to the store.” If you capitalize each word in the sentence, it takes on a more formal tone: “I’m Going To The Store.”
In some cases, capitalizing every word in a sentence can make it seem more important or emphatic: “I’m going to the store.” vs. “I’m Going To The Store.”
Capital letters can also be used for emphasis within a sentence. For example, you might want to write a headline in all caps to make it stand out: “HOW TO USE CSS UPPERCASE.”
CSS is all about formatting and publishing. So, often, CSS is used for clarity as well as the fundamentals of design. You might find that you want all your H2s to be uppercase simply to distinguish them from the surrounding text. But you also might need to add title case attributes to H2s if your text isn’t all properly formatted.
Top courses in CSS
What are the advantages of using CSS UPPERCASE?
In web development, you frequently want to modify the formatting of a selected text without actually modifying the raw data. Using CSS UPPERCASE rather than trying to modify the text itself will preserve the original text for future formatting.
Additionally, the CSS UPPERCASE attribute is very easy to use. With a few simple lines of code, you can quickly and easily change the formatting of any text on your page.
If you decide that you want to change your page in the future, you can easily do so just by changing your text-transform attribute to lowercase or titlecase.
Finally, browser compatibility for text-transform is nearly universal. This means that you can use it with confidence on most web browsers without having to worry about compatibility issues.
What are the disadvantages of using CSS UPPERCASE?
The only real disadvantage of using CSS UPPERCASE is that it doesn’t work with all browsers. If you’re worried about browser compatibility, you can use a library such as Modernizr to add support for text-transform to older browsers.
Alternatives to using CSS UPPERCASE include:
- Using an HTML tag such as <b> or <strong> to format text as bold.
- Using the CSS font-weight property to make text appear heavier.
- Using the CSS float property to align text to the left or right of a page or column.
- Using the CSS line-height property to increase or decrease the spacing between lines of text.
- Using the CSS text-decoration property to underline, overline, or strikethrough text.
These all serve a similar purpose — calling attention to a piece of text. However, they don’t make the letters uppercase.
In PHP, you can use functions such as strtolower() (lowercase) and strtoupper (uppercase) to also transition a string to lowercase or uppercase without changing the raw, unformatted data.
Why isn’t CSS UPPERCASE working?
There are a few potential reasons why CSS UPPERCASE might not be working for you.
The first is that you might not be using it correctly. Make sure that you’re using the correct syntax and that you’ve applied it to the text that you want to change.
The second possibility is that you are overriding it somewhere else in your CSS. When it comes to CSS, the last set attribute will be the one used. The text-transform attribute will be inherited, but the child may override it.
Finally, you may have cached code that is overriding your changes. If you’re using SCSS vs. CSS, make sure you’ve rebuilt and refreshed all your code.
Conclusion: formatting text through CSS
You probably already knew that you could use CSS functions to change how your text looked. However, you might not have realized that you can change the actual text through text-transform. There’s a lot that you can do in CSS alone.