CSS Uppercase

CSS uppercase is used to capitalize on the text which is used with the text-transform property. Whether you want to use CSS lowercase or CSS capitalize, you have to use the text-transform property with all three.

Related: 14 easiest examples of CSS Syntax in HTML

We have some great examples of CSS uppercase, CSS lowercase and CSS capitalize to explain you better, after seeing which you will know how to make text uppercase in CSS.

CSS Uppercase

If you want to capitalize on your text or heading, then for that you will have to use the text-transform uppercase CSS property. This property will transform all your characters to uppercase. Below you can see in the example how you will use it.

p{
	text-transform: uppercase;
}
h1{
	text-transform: uppercase;
}
div{
	text-transform: uppercase;
}
a{
	text-transform: uppercase;
}
button{
	text-transform: uppercase;
}
span{
	text-transform: uppercase;
}



<h1>this is my heading</h1>

<p>lorem ipsum is simply dummy text</p>

<a href="#">This is my link</a>

<div>lorem ipsum is simply dummy text</div>

<button>click me</button>

<span>this is Lorem Ipsum</span>

CSS Capitalize

If you want to make the first letter of your text word or heading or any other text appears larger. So for this, you have to use the text-transform capitalize CSS property. Let’s know how to use CSS capitalize first letter property.

p{
	text-transform: capitalize;
}
h1{
	text-transform: capitalize;
}
div{
	text-transform: capitalize;
}
a{
	text-transform: capitalize;
}
button{
	text-transform: capitalize;
}



<h1>this is my heading</h1>

<p>lorem ipsum is simply dummy text</p>

<a href="#">This is my link</a>

<div>lorem ipsum is simply dummy text</div>

<button>click me</button>

CSS Lowercase

If you want your text to appear in lowercase letters, for that you will have to use the text-transform lowercase CSS property. This property will transform all your characters to lowercase. Let’s know how to use CSS Lowercase property.

p{
	text-transform: lowercase;
}
h1{
	text-transform: lowercase;
}
div{
	text-transform: lowercase;
}
a{
	text-transform: lowercase;
}



<h1>THIS IS MY HEADING</h1>

<p>LOREM IPSUM IS SIMPLY DUMMY TEXT</p>

<a href="#">THIS IS MY LINK</a>

<div>LOREM IPSUM IS SIMPLY DUMMY TEXT</div>

Browser Support

  • Firefox
  • Internet Explorer
  • Opera
  • Safari
  • Chrome

Frequently Asked Questions

We have answers to some questions that people search on the Internet every day. Let’s know what those questions are and what their answers are.

What CSS property is used to uppercase text

The text-transform property is used for this.

What is font weight in CSS?

Font weight within CSS is the fatness of any text.

How do I link CSS to HTML?

To link CSS with html, you can place your file inside the head tag. For example link rel = “stylesheet” href = “mystyle.css”

What are the 3 types of CSS?

There are 3 types of CSS, internal, external, and inline

How do you put a full background image on HTML?

If you want to apply the full background image, then you can apply the image above your body tag. for example Background-image: url (“myimage.jpg”).

What is div in HTML?

In simple language, div is a box inside which you set your elements.

How do you underline in HTML?

With the u tag you can underline your text.

Where do I put CSS in HTML?

There are 3 ways to apply CSS, either you can link your file inside the head tag, or you can add inline CSS, or you can place your CSS on the same page with the style tag.

What is the HTML code for bold?

You can use b tag and strong tag to bold your text.

Related: 5 Best examples of creating HTML Nav Bar

Related: Best 8 examples of using CSS background position