Chris Berger
0
Q:

css text transform

.uppercase {
  text-transform: uppercase;
}

#example {
  text-transform: none;	/* No capitalization, the text renders as it is (default) */
  text-transform: capitalize;	/* Transforms the first character of each word to uppercase */
  text-transform: uppercase;	/* Transforms all characters to uppercase */
  text-transform: lowercase;	/* Transforms all characters to lowercase */
  text-transform: initial;	/* Sets this property to its default value */
  text-transform: inherit;	/* Inherits this property from its parent element */
}
20
/*HTMl*/
<p >Initial String
  <h2>Lorem ipsum dolor sit amet</h2>
</p>
<div class="heading">
  This will be capitalize
</div>

 /*CSS*/
.heading {
  text-transform: capitalize;
}
/*OTHER TEXT TRANSFORM*/ 
text-transform: none;
text-transform: capitalize;
text-transform: uppercase;
text-transform: lowercase;
text-transform: full-width;
text-transform: full-size-kan
17

  
    div.a {
  text-transform: uppercase;
}


    div.b {
  text-transform: lowercase;
}


    div.c {
  text-transform: capitalize;
} 
3
#example {
  text-transform: none;	/* No capitalization, the text renders as it is (default) */
  text-transform: capitalize;	/* Transforms the first character of each word to uppercase */
  text-transform: uppercase;	/* Transforms all characters to uppercase */
  text-transform: lowercase;	/* Transforms all characters to lowercase */
  text-transform: initial;	/* Sets this property to its default value */
  text-transform: inherit;	/* Inherits this property from its parent element */
}
2
/*
The text-transform property controls the capitalization of text.
*/

CSS Syntax
text-transform: none|capitalize|uppercase|lowercase|initial|inherit;

/*
none		-> No capitalization. The text renders as it is. This is default	
capitalize	-> Transforms the first character of each word to uppercase	
uppercase	-> Transforms all characters to uppercase	
lowercase	-> Transforms all characters to lowercase	
initial	    -> Sets this property to its default value. Read about initial	
inherit	    -> Inherits this property from its parent element. Read about inherit
*/

Example
Transform text in different <div> elements:

div.a {
  text-transform: uppercase;
}

div.b {
  text-transform: lowercase;
}

div.c {
  text-transform: capitalize;
}

/* For more you can refer https://www.w3schools.com/cssref/pr_text_text-transform.asp*/
12
/* Answer to: "css all caps" */

/*
  The text-transform property controls the capitalization of text.
  For an interactive demonstration on each property value, go to:
  https://www.w3schools.com/cssref/playit.asp?filename=playcss_text-transform&preval=uppercase

  Syntax: text-transform: none|capitalize|uppercase|lowercase|initial|inherit;
*/

div.a {
  text-transform: uppercase;
}

div.b {
  text-transform: lowercase;
}

div.c {
  text-transform: capitalize;
}
11

  
div.a {
  text-transform: uppercase;
}


div.b {
  text-transform: lowercase;
}


div.c {
  text-transform: capitalize;
} 
1

New to Communities?

Join the community