CSS Text Control Tutorial
 
Network Websites
Corporate website
Beautiful Clip Art
Fast Cars
Video Tiger
Fantasy Art
Beauty & Health
Tips & Tricks

Fast Loading Pages
Glowing Links II
Hide E-mail Address
Javascript Links
Link Colors
Marquees
Navigation
New Window
No Underline Links
Out of a Frame
Page Flash Effects
Preload Graphics Protect Graphics
Redirect Scrolling Javascript
Text Roll-Overs
Tooltip Links
[more tips...]

Tutorials
CSS
Colors
Forms
FTP
Image Maps
Meta Tags
Resources

Web Hosting
Counters & Trackers
Domain Names
Graphics
Web Page Design
Java Script
DHTML

 

CSS Text Control Tutorial

Do you want to manage the arrangement of your text without using tables? With CSS you can set various spacing, indentations, decorations and more.

Adjusting Line Height

Anybody who has ever typed a term paper knows that it usually has to be double-spaced. This is useful for pages that have a lot of text since it encourages legibility.

For example, if you want your whole page to be double-spaced, use this code (works with IE3+ and NS4+):

    <HEAD> <STYLE TYPE="text/css">
    <!--
    BODY {line-height: 2;}
    -->
    </STYLE>
    </HEAD>

Alternatively, you can use 200% instead of 2 for the line-height value. Also, 24pt will work very well if the font size is set to 12pt.

Indenting Paragraphs

Yes, finally the Web allows for paragraph indentation! Now, you can specify extra spaces at the beginning of the first line in a paragraph by using the text-indent property (supported by IE3+ and NS4+):

    <HEAD><STYLE TYPE="text/css">
    <!--
    P {text-indent: 2em; margin: 0;}
    -->
    </STYLE>
    </HEAD>

Another way to do this is to use a percentage value instead of the 2em length value. For example, type 10%.

Decorating The Text

Decorations can be used to add emphasis to certain areas where they are used. Both the underline and line-through work with IE3+ and NS4+.

    <HEAD> <STYLE TYPE="text/css">
    <!--
    EM {text-decoration: underline;}
    -->
    </STYLE>
    </HEAD>

Demo:     Underline a title or a heading!

Replace the underline with line-through for the text-decoration value to have a line cross your text.

CSS Tutorials

Sponsor

Hot Wedding Ideas

Advertise
Really affordable rates.
Feedback
Comments, suggestions?

 

 

home | tips & tricks | tutorials | tools | resources | contact | advertise
© 2000 - 2001 GT Media Inc. All rights reserved.