Set the Text Case
By Stephen Bucaro
The text-transform property allows you to force the case of all letters
within an html element to upper-case, lower-case, or the first letter of each word
to upper-case. Setting the case of all letters in a phrase can be used to eliminate
case sensitivity in a search algorithm. Setting the first letter of each word
in a phrase can be used to automatically create a title.
Here's the original paragraph:
And the rockets red glare, the bombs bursting in air, Gave proof through the
night that our flag was still there.
Here's the same paragraph with the text-transform set to uppercase:
<p style="text-transform: uppercase;">And the rockets
red glare, the bombs bursting in air, Gave proof through
the night that our flag was still there.</p>
And the rockets red glare, the bombs bursting
in air, Gave proof through the night that our flag was still there.
Here's the same paragraph with the text-transform set to lowercase:
And the rockets red glare, the bombs bursting
in air, Gave proof through the night that our flag was still there.
Here's the same paragraph with the text-transform set to capitalize:
And the rockets red glare, the bombs bursting
in air, Gave proof through the night that our flag was still there.
If what you're really looking for is to capitalize only the first letter
of every paragraph, then you need to use the first-letter pseudo-element,
as shown below:
<style type="text/css">
p:first-letter
{
text-transform: uppercase;
}
</style>
If what you're really looking for is to capitalize only the first letter
of a single or of specific paragraphs, then you need to define a class that
uses the first-letter pseudo-element, as shown below:
<style type="text/css">
.myPara:first-letter
{
text-transform: uppercase;
}
</style>
<p class="myPara">and the rockets red glare, the bombs
bursting in air, gave proof through the night that our
flag was still there.</p>
and the rockets red glare, the bombs bursting
in air, gave proof through the night that our flag was still there.
More CSS Quick Reference:
• Use Image for List Item Bullets
• Set the Background Color
• Set an Element's Clipping
• Define CSS Rollover Effects
• How to Use a CSS ID Selector
• Set a Background Image's Position
• Set the Font Boldness
• Set the Letter Spacing
• Set the Border Width
• Set the Font Variant
| 
About BTH
User Agreement
Privacy
Site Map
Contact
News Feeds
RSS Feed
Follow @Stephen Bucaro
General Web Design
