CSS3 > Texts

Text-transform Property in CSS3

How to control the capitalization of text in CSS3?


By using text-transform property we can control the capitalization of text.

<style>
        .class1 {text-transform:capitalize;}
        .class2 {text-transform:lowercase;}
        .class3 {text-transform:uppercase;}
        .class4 {text-transform:none;}
</style>

<body>
    <p class="class1">This is TechFunda</p>
    <p class="class2">This is TechFunda</p>
    <p class="class3">This is TechFunda</p>
    <p class="class4">This is TechFunda</p>
</body>

In the above code snippet we have given the text-transform property to the .class selector. .class selector selects the every <p> element and applies the given property according to the thier value. The text-transform property with value "capitalize" changes the every first letter of the word into capital letter, the transform-property with value "lowecase" changes the total text into lowercase letters, the text-transform property with value "uppercase" changes the total text into uppercase letters, the text-transform property with value "none" remains the same (given text in <p> element remains same in output).

OUTPUT

 Views: 578 | Post Order: 84



Write for us