CSS: Working with Text - You Seem So Distant
(Page 3 of 5 )
You can set the distance between characters, allowing for closer characters or characters that are spaced further apart, using letter-spacing:
<html>
<head>
<style type="text/css">
h1 {letter-spacing: -5px}
p.whoops {letter-spacing: 0.5cm}
</style>
</head>
<body>
<h1>Text that is smooshed together</h1>
<p class="whoops">Text that is letting it all hang out</p>
<p>Normal text</p>
</body>
</html>
Behold the result!
I Just Need Some Space!
Similarly you can modify the space in between lines as well using line-height. Here's a sample:
<html>
<head>
<style type="text/css">
p.smooshed {line-height: 90%}
p.spreadout {line-height: 200%}
</style>
</head>
<body>
<p>
Hey, everything is looking just fine and dandy here. Yeap, plenty of space here. No overcrowding. I can stretch out. Spread the legs a little. Lay back and relax.</p>
<p class="smooshed">Hey uhh....I don't feel so well. Like the walls are starting to close in man. I need air! I need space! Feeling a little cramped...go to your happy place, go to your happy place...</p>
<p class="spreadout">
What? Do I stink or something? I mean, why are all you sentences spread out so far. Do I need a breath meant. Is it my shoes? I showered just the other day. What gives? Where you guys going? GET BACK HERE!</p>
</body>
</html>
And again, for your viewing pleasure:
Increasing the White Space Between Words
In this example, we will increase the white space in between words using word-spacing:
<html>
<head>
<style type="text/css">
p
{
word-spacing: 30px
}
p.monkey
{
word-spacing: -10px
}
</style>
</head>
<body>
<p>
This is what happens when two pieces of text collide:
</p>
<p class="monkey">Wow look at how close we are</p>
</body>
</html>
As you can see when you test your code, the spacing of the first paragraph is spread out pretty far, while the spacing of the p.monkey paragraph is smooshed together.
Next: How To Align Your Text >>
More Style Sheets Articles
More By James Payne
/ 2 
