CSS Text
| Property | Value | Description | N.N. | I.E. |
|---|---|---|---|---|
| color: | Color name Hexadecimal value RGB value |
Specify text colors | 4.0 | 3.0 |
| text-align: | left right center justify |
Aligns the text horizontally with its element | 4.0 | 4.0 |
| vertical-align: | super sub top middle bottom baseline text-top text-bottom |
Aligns the text vertically with its element | 6.0 | 4.0 |
| text-decoration: | none underline overline line-through blink |
Adds the specified decoration to the text | 4.0 | 4.0 |
| text-indent: | length percentage |
Indents first line of text in an element | 4.0 | 4.0 |
| text-transform: | none capitalize uppercase lowercase |
Controls the case of letters in an element | 4.0 | 4.0 |
| letter-spacing: | length normal |
Set spacing between text characters (kerning) | 6.0 | 4.0 |
| word-spacing: | length normal |
Set spacing between words | 6.0 | 6.0 |
| line-height: | normal number length percentage |
Set spacing between lines (leading) | 4.0 | 4.0 |
| white-space: | normal pre nowrap |
Sets how an elements white spaces are handled | 4.0 | 5.5 |
|
||||
I've used the inline style above on this very paragraph so you could see it in action. The value may be a color name such as red, blue, green, black, ect. It can also be a hexadecimal value such as #0000FF (blue) or an RGB color- color:rgb(0,0,255); (also blue).
The RGB value can be expressed as a integer (0-255), or as a percentage (0%-100%). The choice of what one to use is up to you and your needs. Does all this seem familiar? The color values are the same for text colors as it is for background colors.
This one is for the horizontal (side to side) alignment of the text with its parent element. The default is left and will have each line of text starting at the same point from the left margin. In essences the first letter of each line will form a vertical column. A value of right will do the same with the right margin. Center will align each line of text with the center of its parent element (see my header "CSS Text" above). Justify spaces the text so both right and left margins form a straight line vertically like this paragraph does using the above inline style. Notice the different spacing between words to accomplish this. Pretty simple stuff, huh?
This one is for the vertical (top to bottom) alignment of the text with its parent element. Here's an example of the code aboveexample. As you can see, it works much like the HTML tag <sup>. The vertical-align:sub; works like the HTML tag <sub>. However if you're going to want the text smaller like the <sup> and <sub> tags produces, then you're going to have to adjust the font-size:. For more on that go to fonts.
The rest of the vertical-align values aren't as simple as the two above and require a visual example of them to fully understand. They don't apply so much to the text itself, but to the relationship of other elements to it. Since the explanation gets a bit long and this page is large enough, we'll continue it on the next page.
