CSS text-transform Property
CSS text-transform Property Tutorial
CSS text-transform Property
CSS text-transform property is used to control capitalization of text. change text appears visually in browser without changing the original HTML Content.
HTML text actual in stays same, but CSS change how is displayed.
Syntax
selector {
text-transform: value;
}
CSS text-transform Property
Structure Explained with Diagram
CSS text-transform Property
1) uppercase
2) lowercase
3)capitalize
CSS text-transform Property Tutorial
Example
<!DOCTYPE html>
<html>
<head>
<style>
.upper{
text-transform:uppercase ;
}
.lower{
text-transform:lowercase ;
}
.cap {
text-transform: capitalize;
}
</style>
</head>
<body>
<h2 class="upper">css text transformation</h2>
<p class="lower">CSS TEXT TRANSFORMATION PROPERTY</p>
<p class="cap">CSS Text Transformation Property</p>
</body>
</html>
CSS text-transform Property Tutorial
Explain Program
<!DOCTYPE html>
- This declare the document type.
- browser that the document is written in html
Step 2]
<html>.... . </html>
- html is the root element of the html page.
- Every thing inside it is part of the webpage.
Step 3]
<head>
- <head> section contains metadata and css styles,not visible content.
- Contains styles, metadata and page setting
Step 4]
<style> tag Internal CSS Section
<style>
.upper{
text-transform:uppercase ;
}
.lower{
text-transform:lowercase ;
}
.cap {
text-transform: capitalize;
}
</style>
CSS text-transform Property
1) .upper
- This is class selector.
- it applies to any element with class="upper".
- text-transform: uppercase;
- Converts all letters is capital letter.
CSS code
.upper {
text-transform: uppercase;
}
Example
<h2 class="upper">css text transformation</h2>
Output
CSS TEXT TRANSFORMATION
2) .lower
- applies to element with class="lower"
- converts all letters into small letters.
- Converts all letters to small letter.
css code
.lower{
text-transform:lowercase ;
}
Example
<p class="lower">CSS TEXT TRANSFORMATION </p>
Output
css text transformation
3) .cap
- Applies to element with class="cap".
- converts the first letter of each word into capital.
CSS code
.cap {
text-transform: capitalize;
}
Example
<p class="cap">CSS Text Transformation </p>
Output
Css Text Transformation
Step 5]
Closing tag
<</style>
</head>
Step 6]
<body> section
<h2 class="upper">css text transformation</h2>
<p class="lower">CSS TEXT TRANSFORMATION PROPERTY</p>
<p class="cap">CSS Text Transformation Property</p>
1) Original text css text transformation
Because of upper it display
2) original text CSS TEXT TRANSFORMATION PROPERTY
Because of lower it case
3) original text CSS Text Transformation Property
Because of capitalize it display
Step 7]
closing the Tag
</body> </html>
CSS text-transform Property Tutorial
Output
Related Post :-
Comments
Post a Comment