The text-transform property in CSS is used to control
the capitalization of text in an element. It can be applied to any text-containing
HTML element, such as paragraphs, headings, and spans. This property is
particularly useful for standardizing the appearance of text across a website,
ensuring consistency regardless of how the text is input by users or content
creators.
Syntax
selector {
text-transform: value;
}
Value can be one of the below.
|
Value |
Description |
Example |
|
none |
Default value. The text is displayed as it is written in the HTML without any transformation. |
p.normal { text-transform: none; } |
|
capitalize |
Transforms the first character of each word to uppercase. All other characters remain unchanged. |
p.capitalize { text-transform: capitalize; } |
|
uppercase |
Transforms all characters in the text to uppercase. |
p.uppercase { text-transform: uppercase; } |
|
lowercase |
Transforms all characters in the text to lowercase. |
p.lowercase { text-transform: lowercase; } |
|
full-width |
Converts the text to full-width form, which is used in East Asian typography. |
p.full-width { text-transform: full-width; } |
textTransform.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Text Transform Example</title> <style> p { font-size: 16px; margin-bottom: 10px; } p.uppercase { text-transform: uppercase; } p.lowercase { text-transform: lowercase; } p.capitalize { text-transform: capitalize; } p.full-width{ text-transform: full-width; } </style> </head> <body> <p class="uppercase">This text will be in uppercase.</p> <p class="lowercase">THIS TEXT WILL BE IN LOWERCASE.</p> <p class="capitalize">this text will be capitalized.</p> <p class="full-width">this text will be in full width form</p> </body> </html>
Previous Next Home
No comments:
Post a Comment