Lesson 11 Cascading Style Sheets/Text

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>
. . .

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>
. . .

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
By now, your sample2.htm file should look like this.
For more information on the topics of this Lesson, see this site.

Lesson 10 CSS/Background   < <  PREVIOUS   Table of Contents NEXT  > >   Lesson 12 CSS/Positioning

Developed with HTML-Kit
Sandersongs Web Tutorials
Contact the Webmasterwith comments.
©2017, by Bill Sanders, all rights reserved.
This domain had 4,030 different visits in the last 30 days.
435,596 hits on this domain since 24 Nov 2006.
http://www.sandersongs.com/HTMLcourse/Lesson11.php
This page was last modified on our server on 5 Oct 2013
and last refreshed on our server at 3:58 am, MST
This file took 0.00863 seconds to process.