Home arrow Style Sheets arrow CSS: Working with Text
STYLE SHEETS

CSS: Working with Text


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.

Author Info:
By: James Payne
Rating: 4 stars4 stars4 stars4 stars4 stars / 6
March 10, 2008
TABLE OF CONTENTS:
  1. · CSS: Working with Text
  2. · How to Set the Background Color of Text or Highlight the Text
  3. · You Seem So Distant
  4. · How To Align Your Text
  5. · Indenting Text

print this article
SEARCH DEVARTICLES

CSS: Working with Text
(Page 1 of 5 )

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.


blog comments powered by Disqus
STYLE SHEETS ARTICLES

- CSS Padding Overview
- CSS: Margins Overview
- Top CSS3 Button Tutorials
- More Top CSS3 Tutorials for Animation and Im...
- CSS Mega Menus: Adding Extra Sections
- CSS Mega Menus
- CSS3 Accordian Menu: Horizontally Display Hy...
- CSS Combinators: Working with Child Combinat...
- CSS Combinators: Using General Siblings
- Intro to CSS Combinators
- CSS Semicircles and Web Page Headers
- Drawing Circular Shapes with CSS3 and Border...
- More CSS Pagination Link Templates
- CSS Pagination Links
- Animated CSS3 Image Gallery: Advanced Transi...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials