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: 3239 | Post Order: 84