Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Jordan C
6,249 PointsWhat is the purpose of text-transform, when you can just type the text how you want it?
In other words, when would you use one or the other?
2 Answers
Tristan Marsh
8,150 PointsYou can type the text how you want it, but you're not always typing the text you're styling.
Websites are commonly created for multiple users to write content. Content may be coming from external sources such as databases, API's or otherwise unknown and uncontrollable sources. In these situations you may find it useful to be able to control the case of the content for consistency. Buttons, menu items and heading elements often enforce some sort of text-transform rules.
It is relevant to note that the text-transform property is limited and not able to enforce all conceivable rules.
For example, the capitalize property does not distinguish between words which should and should not be capitalised according to title case. For this reason, if you are able to control the source of the data, it is best to use the desired text - rather than relying on the ability to be able to transform it through style. Then, from the most articulated source, utilise the lower and upper case transforms to accurately have the three most common styles at your disposal.
/* Keyword values */
text-transform: capitalize | uppercase | lowercase | none;
Amrit Pandey
17,595 PointsIt has a real great purpose!
Its like designing the quality in your webpages.
Suppose a text on button looks great if it is in uppercase. So we can do two things, one is to type uppercase letters in html files while creating buttons, but think, if you have 100 buttons on a website and on different places then you have to type and hold SHIFT on keyboard 100 times, if by case you missed one time, there will be inconsistency in your page.
We are developer, our job is to design quality and not to add quality to our design.
Instead of typing in uppercase 100 times we just add one line of code text-transform:uppercase;.
SIMPLE yet COMPLETE :)