TEXT FORMATTING
This text is styled with some of the text formatting properties. The heading uses the text-align, text-transform, and color properties. The paragraph is indented, aligned, and the space between characters is specified.
Text Color
The color property is used to set the color of the text.
With CSS, a color is most often specified by:
- a HEX value - like "#ff0000"
- an RGB value - like "rgb(255,0,0)"
- a color name - like "red"
Look at CSS Color Values for a complete list of possible color values.
The default color for a page is defined in the body selector.
Example
<html>
<head>
<style type="text/css">
body {color:red;}
h1 {color:#00ff00;}
p.ex {color:rgb(0,0,255);}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<p>This is an ordinary paragraph. Notice that this text is red. The default text-color for a page is defined in the body selector.</p>
<p class="ex">This is a paragraph with class="ex". This text is blue.</p>
</body>
</html>
Try it yourself in Notepad or Dreamweaver by coping and pasting the code above.
Result:
This is heading 1
This is an ordinary paragraph. Notice that this text is red. The default text-color for a page is defined in the body selector.
This is a paragraph with class="ex". This text is blue.
For compliant CSS: If you define the color property, you must also define the background-color property.Text Alignment
The text-align property is used to set the horizontal alignment of a text.
Text can be centered, or aligned to the left or right, or justified.
When text-align is set to "justify", each line is stretched so that every line has equal width, and the left and right margins are straight (like in magazines and newspapers).
Example
<html>
<head>
<style type="text/css">
h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}
</style>
</head>
<body>
<h1>CSS text-align Example</h1>
<p class="date">May, 2009</p>
<p class="main">In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me,
'just remember that all the people in this world haven't had the advantages that you've had.'</p>
<p><b>Note:</b> Resize the browser window to see how the value "justify" works.</p>
</body>
</html>
Try it yourself in Notepad or Dreamweaver by coping and pasting the code above.
CSS text-align Example
May, 2009
In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'
Note: Resize the browser window to see how the value "justify" worksText Decoration
The text-decoration property is used to set or remove decorations from text.
The text-decoration property is mostly used to remove underlines from links for design purposes:
Example
<html>
<head>
<style type="text/css">
a {text-decoration:none;}
</style>
</head>
<body>
<p>Link to: <a href="http://www.amaderit.com.com">Amader IT</a></p>
</body>
</html>
Try it yourself in Notepad or Dreamweaver by coping and pasting the code above.
Example
<html>
<head>
<style type="text/css">
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
h4 {text-decoration:blink;}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<p><b>Note:</b> The "blink" value is not supported in IE, Chrome, or Safari.</p>
</body>
</html>
Try it yourself in Notepad or Dreamweaver by coping and pasting the code above.
Result:
It is not recommended to underline text that is not a link, as this often confuses users.
This is heading 1
This is heading 2
This is heading 3
This is heading 4
Note: The "blink" value is not supported in IE, Chrome, or Safari.
It is not recommended to underline text that is not a link, as this often confuses users.Text Transformation
The text-transform property is used to specify uppercase and lowercase letters in a text.
It can be used to turn everything into uppercase or lowercase letters, or capitalize the first letter of each word.
Example
<html>
<head>
<style type="text/css">
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}
</style>
</head>
<body>
<p class="uppercase">This is some text.</p>
<p class="lowercase">This is some text.</p>
<p class="capitalize">This is some text.</p>
</body>
</html>
Try it yourself in Notepad or Dreamweaver by coping and pasting the code above.
THIS IS SOME TEXT.
this is some text.
This Is Some Text.
Text Indentation
The text-indentation property is used to specify the indentation of the first line of a text.
Example
<html>
<head>
<style type="text/css">
p {text-indent:50px;}
</style>
</head>
<body>
<p>In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'</p>
</body>
</html>
Try it yourself in Notepad or Dreamweaver by coping and pasting the code above.
In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'
More Examples
Specify the space between characters
This example demonstrates how to increase or decrease the space between characters.
Example
<html>
<head>
<style type="text/css">
h1 {letter-spacing:2px;}
h2 {letter-spacing:-3px;}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
</body>
</html>
Try it yourself in Notepad or Dreamweaver by coping and pasting the code above.
Result:
This is heading 1
This is heading 2
Specify the space between lines
This example demonstrates how to specify the space between the lines in a paragraph.
Example
<html>
<head>
<style type="text/css">
p.small {line-height:70%;}
p.big {line-height:200%;}
</style>
</head>
<body>
<p>
This is a paragraph with a standard line-height.<br />
This is a paragraph with a standard line-height.<br />
The default line height in most browsers is about 110% to 120%.<br />
</p>
<p class="small">
This is a paragraph with a smaller line-height.<br />
This is a paragraph with a smaller line-height.<br />
This is a paragraph with a smaller line-height.<br />
This is a paragraph with a smaller line-height.<br />
</p>
<p class="big">
This is a paragraph with a bigger line-height.<br />
This is a paragraph with a bigger line-height.<br />
This is a paragraph with a bigger line-height.<br />
This is a paragraph with a bigger line-height.<br />
</p>
</body>
</html>
Try it yourself in Notepad or Dreamweaver by coping and pasting the code above.
Result:
This is a paragraph with a standard line-height.This is a paragraph with a standard line-height.
The default line height in most browsers is about 110% to 120%.
This is a paragraph with a smaller line-height.
This is a paragraph with a smaller line-height.
This is a paragraph with a smaller line-height.
This is a paragraph with a smaller line-height.
This is a paragraph with a smaller line-height.
This is a paragraph with a smaller line-height.
This is a paragraph with a smaller line-height.
This is a paragraph with a bigger line-height.
This is a paragraph with a bigger line-height.
This is a paragraph with a bigger line-height.
This is a paragraph with a bigger line-height.
This is a paragraph with a bigger line-height.
This is a paragraph with a bigger line-height.
This is a paragraph with a bigger line-height.
Set the text direction of an element
This example demonstrates how to change the text direction of an element.
Example
<html>
<head>
<style type="text/css">
div.ex1 {direction:rtl;}
</style>
</head>
<body>
<div>Some text. Default writing direction.</div>
<div class="ex1">Some text. Right-to-left direction.</div>
</body>
</html>
Try it yourself in Notepad or Dreamweaver by coping and pasting the code above.
Result:
Some text. Default writing direction.
Some text. Right-to-left direction
Increase the white space between words
This example demonstrates how to increase the white space between words in a paragraph.
Example
<html>
<head>
<style type="text/css">
p
{
word-spacing:30px;
}
</style>
</head>
<body>
<p>
This is some text. This is some text.
</p>
</body>
</html>
Try it yourself in Notepad or Dreamweaver by coping and pasting the code above.
Result:
This is some text. This is some text.
Disable text wrapping inside an element
This example demonstrates how to disable text wrapping inside an element.
Example
<html>
<head>
<style type="text/css">
p
{
white-space:nowrap;
}
</style>
</head>
<body>
<p>
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p>
</body>
</html>
Try it yourself in Notepad or Dreamweaver by coping and pasting the code above.
Vertical alignment of an image
This example demonstrates how to set the vertical align of an image in a text.
Example
<html>
<head>
<style type="text/css">
img.top {vertical-align:text-top;}
img.bottom {vertical-align:text-bottom;}
</style>
</head>
<body>
<p>An <img src="your_image.gif" alt=" your_image " width="270" height="50" /> image with a default alignment.</p>
<p>An <img class="top" src=" your_image .gif" alt=" your_image " width="270" height="50" /> image with a text-top alignment.</p>
<p>An <img class="bottom" src=" your_image .gif" alt=" your_image " width="270" height="50" /> image with a text-bottom alignment.</p>
</body>
</html>
Try it yourself in Notepad or Dreamweaver by coping and pasting the code above.
All CSS Text Properties
| Property | Description |
|---|---|
| color | Sets the color of text |
| direction | Specifies the text direction/writing direction |
| letter-spacing | Increases or decreases the space between characters in a text |
| line-height | Sets the line height |
| text-align | Specifies the horizontal alignment of text |
| text-decoration | Specifies the decoration added to text |
| text-indent | Specifies the indentation of the first line in a text-block |
| text-shadow | Specifies the shadow effect added to text |
| text-transform | Controls the capitalization of text |
| unicode-bidi | |
| vertical-align | Sets the vertical alignment of an element |
| white-space | Specifies how white-space inside an element is handled |
| word-spacing | Increases or decreases the space between words in a text |
