CSS: Working with Text (Page 1 of 5 )
In our last article we left off discussing backgrounds in CSS. We also briefly touched upon working with text, with a promise that I would continue the discussion here. Text is still one of the most important parts of a website, so be prepared to get down to some serious work.
Before we do however, behold my mighty table!
Name of Property | What it Does | Associated Values |
color | Allows you to set the color of the text | color |
direction | Allows you to set the direction in which the text flows | ltr (left) rtl (right) |
line-height | Allows you to set the distance between your lines | normal number length % |
letter-spacing | Allows you to increase or decrease the amount of space between characters | normal length |
text-align | Allows you to align the text | center justify left right |
text-decoration | Allows you to add decorations to your text | blink line-through none overline underline |
text-indent | Indents the first line of text | length % |
text-transform | Allows you to control the letters in an element | capitalize lowercase none uppercase |
white-space | Allows you to set how the white space within an element is handled | normal nowrap pre |
word-spanning | Allows you to increase or decrease the amount of space between words | length normal |
Setting the Color of Text
You can change the color of your text in CSS pretty easily. Below is an example of how to change headers and paragraphs:
<html>
<head>
<style type="text/css">
h1 {color: #FF9900}
h2 {color: #CC99FF}
h3 {color: #CC9966}
h4 {color: #FF3300}
h5 {color: #66CCFF}
h6 {color: #6600CC}
p {color: rgb(3,60,10)}</style>
</head>
<body>
<h1>Hello</h1>
<h2>How</h2>
<h3>Are</h3>
<h4>You</h4>
<h5>Oh Wait...</h5>
<h6>I don't care.</h6>
<p>The End...or is it?!?</p>
<p>Duhn Duhn Duhn!</p>
</body>
</html>
The result of this splendiforous code is:
Hello
How
Are
You
Oh Wait...
I don't care.
The End...or is it?!?
Duhn Duhn Duhn!
Note that your colors may appear different from the ones shown here due to editing.
Next: How to Set the Background Color of Text or Highlight the Text >>
More Style Sheets Articles
More By James Payne
