CSS: Working with Text - Indenting Text
(Page 5 of 5 )
You can indent text using text-indent:
<html>
<head>
<style type="text/css">
p {text-indent: 1cm}
h1 {text-indent: 10%}
h2 {text-indent: 20%}
h3 {text-indent: 30%}
h4 {text-indent: 40%}
h5 {text-indent: 50%}
h6 {text-indent: 60%}
</style>
</head>
<body>
<p>
Chuck Norris stared deeply into the darkness, unaware that it stared deeply back at him. A rustle, ever so faint, finger brushing against leaf. But it was enough...
</p>
<p>He ran blindly towards the sound, the wind whipping through his powerful goat-tee, giving brief glimpses to the first that lay hidden beneath</p>
<h1>Bruce Lee</h1>
<h2>Gary Coleman</h2>
<h3>Chuck Norris</h3>
<h4>In a film by James Payne</h4>
<h5>A James Payne Joint</h5>
<h6>Coming this Fall to a theatre near you...</h6>
<h3><i>Midget Blood Bath 4000</i></h3>
</body>
</html>
As you can see, you can set the indentation by centimeters or percentage.
Transforming Text
You can transform your text using text-transform. This allows you to set your text in all lowercase or uppercase, and lets you choose to capitalize the first letter of each word:
<html>
<head>
<style type="text/css">
p.uppercase {text-transform: lowercase}
p.lowercase {text-transform: uppercase}
p.capitalize {text-transform: capitalize}
b {text-transform: uppercase}
</style>
</head>
<body>
<p class="uppercase">Cookie Crisp is a good idea, but it fails in its execution</p>
<p class="lowercase">I Love Apples Jacks</p>
<p class="capitalize">fruit loops are good too</p>
</body>
<p><b>you mental midget</b></p>
</html>
This results in the following:
cookie crisp is a good idea, but it fails in its execution
I LOVE APPLE JACKS
Fruit Loops Are Good Too
YOU MENTAL MIDGET
Conclusion
Well that's it for this tutorial. We covered a lot of ground, but there are still a few ways to manipulate text in CSS. In our next episode we will discuss these, as well as manipulating fonts, and probably cover how to work with tables in CSS as well. So come back often, send me lots of money, and get to learning.
Till then...
| DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware. |
/ 2 
