Style Sheets
  Home arrow Style Sheets arrow CSS: Working with Text
Dev Articles Forums 
ADO.NET  
Apache  
ASP  
ASP.NET  
C#  
C++  
ColdFusion  
COM/COM+  
Delphi-Kylix  
Design Usability  
Development Cycles  
DHTML  
Embedded Tools  
Flash  
Graphic Design  
HTML  
IIS  
Interviews  
Java  
JavaScript  
MySQL  
Oracle  
Photoshop  
PHP  
Reviews  
Ruby-on-Rails  
SQL  
SQL Server  
Style Sheets  
VB.Net  
Visual Basic  
Web Authoring  
Web Services  
Web Standards  
XML  
Dedicated Servers  
Download TestComplete 
IBM® developerWorks 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us Get Paid 
Request Media Kit
Contact Us 
Site Map 
Privacy Policy 
Support 
 USERNAME
 
 PASSWORD
 
 
  >>> SIGN UP!  
  Lost Password? 
STYLE SHEETS

CSS: Working with Text
By: James Payne
  • Search For More Articles!
  • Disclaimer
  • Author Terms
  • Rating: 5 stars5 stars5 stars5 stars5 stars / 1
    2008-03-10

    Table of Contents:
  • CSS: Working with Text
  • How to Set the Background Color of Text or Highlight the Text
  • You Seem So Distant
  • How To Align Your Text
  • Indenting Text

  • Rate this Article: Poor Best 
      ADD THIS ARTICLE TO:
      Del.ici.ous Digg
      Blink Simpy
      Google Spurl
      Y! MyWeb Furl
    Email Me Similar Content When Posted
    Add Developer Shed Article Feed To Your Site
    Email Article To Friend
    Print Version Of Article
    PDF Version Of Article
     
     
    Iron Speed
     
    ADVERTISEMENT

    Ajax Application Generator Generate database and reporting .NET Web apps in minutes. Quickly create visually stunning, feature-rich apps that are easy to customize and ready to deploy. Download Now!

    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.

    More Style Sheets Articles
    More By James Payne


       · Thanks for stopping by to read my article on CSS Text. In this episode we discuss...
     

    STYLE SHEETS ARTICLES

    - Using PNG Images to Build Background Effects
    - CSS: Continuing the Clarification of CSS Cla...
    - CSS: Top Secret Classification
    - CSS: Dimensions
    - CSS: Margins and Padding
    - CSS: Crossing the Border
    - CSS: Text, Fonts, and Tables
    - CSS: Working with Text
    - CSS: Backgrounds
    - CSS for the Newbie
    - Styling Web Page Headers with Transparent Ba...
    - Creating Angled Corners with Transparent Bac...
    - Style Sheets for a Useful Links Page
    - Modifying the Look and Feel of Individual El...
    - Using Persistent Styles with Multiple Style ...






    © 2003-2008 by Developer Shed. All rights reserved. DS Cluster 2 hosted by Hostway