CSS: Working with Text - How To Align Your Text
(Page 4 of 5 )
Just as you can align your text in a Word document, so too can you align your text in CSS. Here is an example showing just how to do so:
<html>
<head>
<style type="text/css">
h1 {text-align: left}
h2 {text-align: center}
h3 {text-align: right}
</style>
</head>
<body>
<h1>Chewbacca</h1>
<h2>Did It All</h2>
<h3>For the Wookie</h3>
</body>
</html>
The spectacular result:
Chewbacca
Did It All
For the Wookie
Decorating Your Text for the Holiday
You can add decoration to your text, such as underlining, over-lining, and strike-through with this code:
<html>
<head>
<style type="text/css">
h1 {text-decoration: underline }
h2 {text-decoration: overline}
h3 {text-decoration: line-through}
a {text-decoration: none}
</style>
</head>
<body>
<h1>Look at me I'm underlined! YIPPEE!</h1>
<h2>Oh yeah?!? We'll I'm overlined baby.</h2>
<h3>Meh. I'm on strike.</h3>
<p><a href="http://www.devshed.com">This is where I work</a></p>
</body>
</html>
You can also apply more than one decoration to a text like so:
<html>
<head>
<style type="text/css">
h1 {text-decoration: underline overline; text-align: center}
h2 {text-decoration: overline underline line-through}
h3 {text-decoration: line-through}
a {text-decoration: none}
</style>
</head>
<body>
<h1>Welcome Aboard!</h1>
<h2>oooooooooooooooooo</h2>
<h3>Meh. I'm on strike.</h3>
<p><a href="http://www.devshed.com">This is where I work</a></p>
</body>
</html>
Next: Indenting Text >>
More Style Sheets Articles
More By James Payne
