InfoHeap
Tech
Navigation
  • Home
  • Tutorials
    • CSS tutorials & examples
    • CSS properties
    • Javascript cookbook
    • Linux/Unix Command Line
    • Mac
    • PHP
      • PHP functions online
      • PHP regex
    • WordPress
  • Online Tools
    • Text utilities
    • Online Lint Tools
search

CSS properties

  • CSS3 flexbox
  • all
  • animation
  • background-color
  • background-image
  • border
  • border-color
  • border-radius
  • border-style
  • border-width
  • bottom
  • box-shadow
  • box-sizing
  • calc function
  • clip
  • color
  • color value currentColor
  • color values
  • cursor
  • float
  • font
  • font-family
  • font-size
  • font-style
  • font-variant
  • font-weight
  • generated content
  • left
  • letter-spacing
  • line-height
  • list-style
  • list-style-image
  • list-style-position
  • list-style-type
  • margin
  • max-height
  • max-width
  • min-height
  • min-width
  • opacity
  • outline
  • outline-color
  • outline-style
  • outline-width
  • overflow
  • padding
  • pointer-events
  • position
  • resize
  • right
  • text-align
  • text-decoration
  • text-indent
  • text-overflow
  • text-shadow
  • text-transform
  • top
  • transform
  • transition
  • transition-delay
  • transition-duration
  • transition-property
  • transition-timing-function
  • visibility
  • white-space
  • word-break
  • word-spacing
  • word-wrap/overflow-wrap
  • z-index
 
  • Home
  • > Tutorials
  • > CSS
  • > CSS properties

CSS text-transform – capitalize, uppercase and lowercase text

on Mar 23, 2016

CSS property text-transform controls capitalization effects of an element’s text

CSS property text-transform

CSS version: CSS 2.1
Value: capitalize | uppercase | lowercase | none | inherit
Initial: none
Applies to: all elements
Inherited: yes

text-transform values

noneNo capitalization
capitalizePuts the first character of each word in uppercase; other characters are unaffected.
uppercasePuts all characters of each word in uppercase.
lowercasePuts all characters of each word in lowercase.
inheritinherit value from parent

Example – text-transform

<style> 
span {margin: 5px; background-color:lightgray;}
.cap {text-transform: capitalize;}
.uc {text-transform: uppercase;}
.lc {text-transform: lowercase;}
</style>

<span class="cap">capitalize example</span>
<span class="uc">Uppercase example</span>
<span class="lc">Lowercase example example</span>
refresh done
try it online

Related

  • CSS letter-spacing - additional spacing between adjacent chars
  • CSS text-align - align text left, right or justify
  • CSS text-decoration - underline, overline and strikeout text
  • CSS text-indent - indent text in a block
  • CSS word-spacing - additional space between words

Specification

  • W3C CSS 2.1 text-transform specification

Suggested posts:

  1. HTML5 script async – how to load script asynchronously
  2. CSS letter-spacing – additional spacing between adjacent chars
  3. CSS text-indent – indent text in a block
  4. CORS – cross origin request tutorial and example in PHP
  5. CSS adjacent sibling selector
  6. CSS3 animation overview
  7. Rotate an element using css transform
  8. Running php eval on code with tags
Share this article: share on facebook share on linkedin tweet this submit to reddit
Posted in Tutorials | Tagged CSS, CSS properties, Tutorials
  • Browse content
  • Article Topics
  • Article archives
  • Contact Us
Popular Topics: Android Development | AngularJS | Apache | AWS and EC2 | Bash shell scripting | Chrome developer tools | Company results | CSS | CSS cookbook | CSS properties | CSS Pseudo Classes | CSS selectors | CSS3 | CSS3 flexbox | Devops | Git | HTML | HTML5 | Java | Javascript | Javascript cookbook | Javascript DOM | jQuery | Kubernetes | Linux | Linux/Unix Command Line | Mac | Mac Command Line | Mysql | Networking | Node.js | Online Tools | PHP | PHP cookbook | PHP Regex | Python | Python array | Python cookbook | SEO | Site Performance | SSH | Ubuntu Linux | Web Development | Webmaster | Wordpress | Wordpress customization | Wordpress How To | Wordpress Mysql Queries | InfoHeap Money

Copyright © 2025 InfoHeap.

Powered by WordPress