Here are some more Style properties that affect text:
| word-spacing: | sets the amount of extra space between words. Possible values include 'normal' or any length value (px, em, in, etc.). (try it) |
| letter-spacing: | sets the amount of extra space between letters. Possible values include 'normal' or any length value (px, em, in, etc.). Note, if any value other than 'normal' is given, justification will not work. (try it) |
| text-decoration: | possible values are 'none', 'underline', 'overline', 'line-through' or 'blink'. Although 'blink' may be fun to see for the first time, it will be annoying to most viewers, and should be used sparingly. In addition, it may violate §508 standards. Because of this, the newest versions of most browsers do not recognize blink. (try it). |
| vertical-align: | possible values are 'baseline', 'sub', 'super', 'top', 'middle', 'bottom', 'text-top', 'text-bottom' or a percentage. 'Baseline' is the default setting; this means the baseline of the element is the same as the baseline of it's host. 'Sub' and 'super' are subscript and superscript, much like discussed in Lesson 3A. 'Top' aligns the top of the element with the top of the tallest element in the same line. 'Bottom' is the inverse of 'top'. 'Middle' vertically centers the element within its host. 'Text-top' aligns the top of the element with the top of its host's font. 'Text-bottom' is the inverse of 'text-top'. Percentage values refer to the value of the 'line-height' property of the element itself. They raise the baseline of the element (or the bottom, if it has no baseline) the specified amount above the baseline of the host. 'Vertical-align' applies to inline elements. (try it) |
| text-transform: | possible values are 'none', 'capitalize', 'uppercase' or 'lowercase'. 'None' is the default. 'Capitalize' will capitalize the first letter of each word. 'Uppercase' changes all text to uppercase. 'Lowercase' changes all text to lowercase. (try it) |
| text-align: | possible values are 'left', 'right', 'center' or 'justify'. 'Left' is the default. These values are your typical word-processing justifications as seen in Microsoft Word. (try it) |
| text-indent: | possible values are a length or a percentage. This indents the first line of text blocks. (try it) |
| text-shadow: | possible values are a length or a color. This adds a shadow to text; in the newest browsers only. Values for horizontal and vertical offset are required; depth of blur is optional and color is optional. blocks. (try it) |
Open sample2.htm, locate the Style tags within your Head section, and change the Body style declarations, like so:
. . .
<style type="text/css">
<!--
body { color:navy; background-color:#d0d0ff; word-spacing:1em;
background-image: url(graytexture.gif); }
-->
</style>
. . .
<style type="text/css">
<!--
body { color:navy; background-color:#d0d0ff; word-spacing:1em;
background-image: url(graytexture.gif); }
-->
</style>
. . .
Be sure you have a semicolon after each declaration. How does your web page look now? Change the word spacing to '20px' and look at the web page again. Change it back to whatever you like. Now type the following:
. . .
<style type="text/css">
<!--
body { color:white; font-family:helvetica; font-size:14pt;
background-color:yellow; word-spacing:1em; }
p { text-decoration:underline overline; text-transform:capitalize;
text-indent:3em }
-->
</style>
. . .
<style type="text/css">
<!--
body { color:white; font-family:helvetica; font-size:14pt;
background-color:yellow; word-spacing:1em; }
p { text-decoration:underline overline; text-transform:capitalize;
text-indent:3em }
-->
</style>
. . .
If you don't already have a few paragraphs typed, do so now. Again, check the web page. Change things back to whatever you like.
- In this lesson, we learned about these Style declarations:
- word-spacing
- letter-spacing
- text-decoration
- vertical-align
- text-transform
- text-align
- text-indent and
- line-height
For more information on the topics of this Lesson, see this site.
