CSS Text Transformations

If you are anything like me, you are pretty lazy. Like me, you probably spend more time trying to find someone else’s solution to a problem than solving it yourself. Don’t worry, it’s ok, I do it too. The truth hurts doesn’t it?

Well, say for instance you’ve got some text but someone formatted it really funny and capitalized the first letter of each word. With our “busy” schedules, who has time to go through it and change everything by hand? I sure don’t. Don’t worry, there is an easy way to solve this.

So to get started, let’s select some text to manipulate. For this tutorial I’m going to quote another one of my all time favorite songs, “U Can’t Touch This” by the legendary rapper MC Hammer.

“Fresh New Kicks And Pants
You Got It Like That Now You Know You Wanna Dance
So Move Out Of Your Seat
And Get A Fly Girl And Catch This Beat
While It’s Rolling
Hold On
Pump A Little Bit And Let ’em Know It’s Going On
Like That
Like That
Cold On A Mission So Fall On Back
Let ’em Know That You’re Too Much
And This Is A Beat
They Can’t Touch”

Now I know you are sitting there wondering what exactly I’m going to do, and how this is even possible without actually touching the document’s text. Thanks to our good old pal CSS, we have a nifty little function that’s built in and will do this for us. It’s called, **drum rolls**… text-transform, and for this we’ll use the lowercase variation.

.text-cap {
  text-transform:lowercase;
}

What this will do is make all letters lowercase in our selected document. Pretty neat huh? Now it’s finally time to apply our newly created class to our document.

Say we have this particular excerpt from the song in a <blockquote> on the page. All we’ll have to do is add a class, which in this case is called text-cap, to the <blockquote>.

Once applied, you should get something like below.

“Fresh New Kicks And Pants
You Got It Like That Now You Know You Wanna Dance
So Move Out Of Your Seat
And Get A Fly Girl And Catch This Beat
While It’s Rolling
Hold On
Pump A Little Bit And Let ’em Know It’s Going On
Like That
Like That
Cold On A Mission So Fall On Back
Let ’em Know That You’re Too Much
And This Is A Beat
They Can’t Touch”

That’s it! You’ve just applied your first text transform, and shaved some time off in the process. Now get back on the couch and take a nap.

Leave a comment