Quackit Logo
CSS Home

CSS Tutorial

Introduction
CSS Advantages
CSS Syntax
Implementing CSS
CSS Class
CSS ID
CSS Font
CSS Text
CSS Background Code
CSS Border
CSS Margin
CSS Padding
CSS Lists
CSS Height & Width
CSS Positioning
CSS Float
CSS Layers
CSS Summary

CSS Codes

CSS Align
CSS bgcolor
CSS Cellpadding
CSS Cellspacing
CSS Floating Menu
CSS Hyperlinks
CSS Leading
Inline Style Sheets
Embedded Style Sheets
External Style Sheets
CSS Scrollbars
CSS Table Width
CSS Print Version
CSS Table-layout

CSS Examples

CSS Examples
CSS Table-layout Example

CSS Reference

CSS Mini Tutorial
CSS Properties
CSS Color Codes
CSS Template
CSS Media Types
FREE Hosting!
With every domain you register with ZappyHost you get FREE hosting.
Create free Flash websites

CSS Text

Print Version

Apart from the various CSS font properties, there are other properties that can assist in styling your text. For example, you can change the color of text, align text, add decoration properties and more.

In CSS, text can be styled using the properties listed below. Using this list, you can learn how to use each css text property and what it looks like in a browser.

CSS Text Color

<p style="color:olive;">This CSS text color is olive</p>

This results in:

This CSS text color is olive

CSS Text Align

<p style="text-align:right;">This CSS text is aligned right</p>

This results in:

This CSS text is aligned right

CSS Text Indent

Indents the first line of the paragraph.

<p style="text-indent:50px;">This text is indented by 50 pixels. What this means is that the first line of the paragraph will be indented by 50 pixels, but the following lines will not be indented. The text will need to wrap before you can see the indent - hence all this text!</p>

This results in:

This text is indented by 50 pixels. What this means is that the first line of the paragraph will be indented by 50 pixels, but the following lines will not be indented. The text will need to wrap before you can see the indent - hence all this text!

CSS Letter Spacing

<p style="letter-spacing:5px;">This text has letter spacing applied</p>

This results in:

This text has letter spacing applied

CSS Word Spacing

<p style="word-spacing:50px;">This text has word spacing applied</p>

This results in:

This text has word spacing applied

CSS Text Decoration

<p style="text-decoration:overline;">This text has a line over the top</p>
<p style="text-decoration:line-through;">This text has a line through the middle</p>
<p style="text-decoration:underline;">This text has a line underneath</p>
<a style="text-decoration:none;" a href="/css/properties/css_text-decoration.cfm" >
This hyperlink has no underline</a>
<p style="text-decoration:blink;">This text is blinking</p>

This results in:

This text has a line over the top

This text has a line through the middle

This text has a line underneath

This hyperlink has no underline

This text is blinking

CSS Text Transform

<p style="text-transform:uppercase;">This text has been transformed to uppercase</p>
<p style="text-transform:lowercase;">THIS TEXT HAS BEEN TRANSFORMED TO LOWERCASE</p>
<p style="text-transform:capitalize;">this text has been capitalized.</p>

This results in:

This text has been transformed to uppercase

THIS TEXT HAS BEEN TRANSFORMED TO LOWERCASE

this text has been capitalized.

CSS Text Direction

<p style="direction:rtl;">This text is running from right to left. This can be useful for languages where the text runs from right to left. Not so useful for english though...</p>

This results in:

This text is running from right to left. This can be useful for languages where the text runs from right to left. Not so useful for english though...

CSS unicode-bidi

Use this in conjunction with the direction property to determine the direction of the text. Possible values: normal, embed, bidi-override, and inherit.

<p style="direction:rtl;unicode-bidi:bidi-override;">This text is running from right to left. This can be useful for languages where the text runs from right to left. Not so useful for english though...</p>

This results in:

This text is running from right to left. This can be useful for languages where the text runs from right to left. Not so useful for english though...

CSS Text Shadow

<p style="text-shadow:4px 4px 8px blue;">If your browser supports the CSS text-shadow property, this text will have a shadow.</p>

This results in:

If your browser supports the CSS text-shadow property, this text will have a shadow.

CSS White Space

Tells the browser how to handle white space. Possible values: normal, pre, and nowrap.

<p style="white-space:pre;">This text has a line break
and the white-space pre setting tells the browser to honor it
just like the HTML pre tag.</p>

This results in:

This text has a line break and the white-space pre setting tells the browser to honor it just like the HTML pre tag.

Enjoy this website?

  1. Add this page to your Favorites
  2. Link to this page (copy/paste into your own website or blog):
  3. Help support Quackit by making a donation

Oh, and thank you for supporting Quackit!
Need Website Content?
Get unique, quality digital content for your website.
  • 270+ Website Templates
  • 800+ Flash Templates
  • 25,000+ Images, Logos
  • 30,000+ e-Books
  • 15,000+ Scripts
  • 27,000+ Animated GIFs
  • 21,000+ Ringtones
  • ...and much more!
Get your content now!
$1.99 .info domain names!
© Copyright 2000 - 2010 Quackit.com