2018-09-30 22:01:58 +00:00
---
id: 587d781c367417b2b2512ac0
title: Use the text-transform Property to Make Text Uppercase
challengeType: 0
videoUrl: 'https://scrimba.com/c/cvVZQSP'
2019-08-05 16:17:33 +00:00
forumTopicId: 301081
2021-01-13 02:31:00 +00:00
dashedName: use-the-text-transform-property-to-make-text-uppercase
2018-09-30 22:01:58 +00:00
---
2020-11-27 18:02:05 +00:00
# --description--
2018-09-30 22:01:58 +00:00
2020-11-27 18:02:05 +00:00
The `text-transform` property in CSS is used to change the appearance of text. It's a convenient way to make sure text on a webpage appears consistently, without having to change the text content of the actual HTML elements.
The following table shows how the different `text-transform` values change the example text "Transform me".
< table class = 'table table-striped' > < thead > < tr > < th > Value< / th > < th > Result< / th > < / tr > < / thead > < tbody > < tr > < td > < code > lowercase< / code > < / td > < td > "transform me"< / td > < / tr > < tr > < td > < code > uppercase< / code > < / td > < td > "TRANSFORM ME"< / td > < / tr > < tr > < td > < code > capitalize< / code > < / td > < td > "Transform Me"< / td > < / tr > < tr > < td > < code > initial< / code > < / td > < td > Use the default value< / td > < / tr > < tr > < td > < code > inherit< / code > < / td > < td > Use the < code > text-transform< / code > value from the parent element< / td > < / tr > < tr > < td > < code > none< / code > < / td > < td > < strong > Default:< / strong > Use the original text< / td > < / tr > < / tbody > < / table >
# --instructions--
Transform the text of the `h4` to be uppercase using the `text-transform` property.
# --hints--
The `h4` text should be uppercase.
```js
assert($('h4').css('text-transform') === 'uppercase');
2018-09-30 22:01:58 +00:00
```
2020-11-27 18:02:05 +00:00
The original text of the h4 should not be changed.
2018-09-30 22:01:58 +00:00
2020-11-27 18:02:05 +00:00
```js
assert($('h4').text() !== $('h4').text().toUpperCase());
```
2018-09-30 22:01:58 +00:00
2020-11-27 18:02:05 +00:00
# --seed--
## --seed-contents--
2018-09-30 22:01:58 +00:00
```html
< style >
h4 {
text-align: center;
background-color: rgba(45, 45, 45, 0.1);
padding: 10px;
font-size: 27px;
2018-10-08 00:01:53 +00:00
2018-09-30 22:01:58 +00:00
}
p {
text-align: justify;
}
.links {
text-align: left;
color: black;
opacity: 0.7;
}
#thumbnail {
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}
.fullCard {
width: 245px;
border: 1px solid #ccc ;
border-radius: 5px;
margin: 10px 5px;
padding: 4px;
}
.cardContent {
padding: 10px;
}
.cardText {
margin-bottom: 30px;
}
< / style >
< div class = "fullCard" id = "thumbnail" >
< div class = "cardContent" >
< div class = "cardText" >
< h4 > Alphabet< / h4 >
< hr >
< p > < em > Google was founded by Larry Page and Sergey Brin while they were < u > Ph.D. students< / u > at < strong > Stanford University< / strong > .< / em > < / p >
< / div >
< div class = "cardLinks" >
< a href = "https://en.wikipedia.org/wiki/Larry_Page" target = "_blank" class = "links" > Larry Page< / a > < br > < br >
< a href = "https://en.wikipedia.org/wiki/Sergey_Brin" target = "_blank" class = "links" > Sergey Brin< / a >
< / div >
< / div >
< / div >
```
2020-11-27 18:02:05 +00:00
# --solutions--
2018-09-30 22:01:58 +00:00
2019-04-28 18:13:38 +00:00
```html
< style >
h4 {
text-align: center;
background-color: rgba(45, 45, 45, 0.1);
padding: 10px;
font-size: 27px;
text-transform: uppercase;
}
p {
text-align: justify;
}
.links {
text-align: left;
color: black;
opacity: 0.7;
}
#thumbnail {
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}
.fullCard {
width: 245px;
border: 1px solid #ccc ;
border-radius: 5px;
margin: 10px 5px;
padding: 4px;
}
.cardContent {
padding: 10px;
}
.cardText {
margin-bottom: 30px;
}
< / style >
< div class = "fullCard" id = "thumbnail" >
< div class = "cardContent" >
< div class = "cardText" >
< h4 > Alphabet< / h4 >
< hr >
< p > < em > Google was founded by Larry Page and Sergey Brin while they were < u > Ph.D. students< / u > at < strong > Stanford University< / strong > .< / em > < / p >
< / div >
< div class = "cardLinks" >
< a href = "https://en.wikipedia.org/wiki/Larry_Page" target = "_blank" class = "links" > Larry Page< / a > < br > < br >
< a href = "https://en.wikipedia.org/wiki/Sergey_Brin" target = "_blank" class = "links" > Sergey Brin< / a >
< / div >
< / div >
< / div >
2018-09-30 22:01:58 +00:00
```