What is the difference between
<span style="text-transform: uppercase;">some text</span>
and
<span>SOME TEXT</span>
I mean both look exactly the same, but I have read somewhere that it is better to write the text normal in html and then set text-transform: uppercase;
in CSS, but does it really make a difference? I know you can use text-transform: uppercase;
if you want to automatically capitalize every first letter of all paragraphs on a page with pseudo-elements (:first-letter
). I think it would even use more memory and processing/rendering time if you use text-transform: uppercase;
.
A word written entirely in uppercase letters (like WHAT) is said to be written in caps or all caps. Example: A lot of people don't bother using uppercase letters in text messages unless they want to emphasize something.
The text-transform CSS property specifies how to capitalize an element's text. It can be used to make text appear in all-uppercase or all-lowercase, or with each word capitalized. It also can help improve legibility for ruby.
text-transform is simply about converting case. font-variant ideally is about using a variation of the font specifically designed by font designer which is called small capitals.
The text-transform property controls capitalization effects of an element's text.
From a design and content perspective, the CSS option is better.
For starters, you should always use CSS for appearance. HTML is only to describe and structure content.
Now imagine you have a special term on your site that you want in all caps, but tomorrow you decide it should be in small caps or initial caps. Which is easier to change: one line in a style sheet or x number of instances buried in text?
Using CSS today will make your life easier tomorrow.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With