Jan
6

CSS Text Properties

Posted in CSS Tutorials by

0


Css Text Properties

While CSS Font Properties covers most of the traditional ways to format your text, CSS Text Properties allows you to control the spacing, decoration, and alignment of your text.

The style sheet code:

Select Code
1
2
3

.heading { text-align: center; text-transform: uppercase; color: #8493cb; }
.paragraph { text-indent: 12px; text-align: justify; line-height: 16px; }
a { text-decoration: none; color: #990000; }

The HTML code:

Select Code
1
2

<h1 class="heading">sample paragraph</h1>
<p class="paragraph">This example includes several text formatting properties. The heading uses the text-align, text-transform, and color properties. The paragraph is indented, aligned, and extra space is added between the lines. Not only did we make this pretend link red, we also removed the default underline.</p>

The result:

sample paragraph
This example includes several text formatting properties. The heading uses the text-align, text-transform, and color properties. The paragraph is indented, aligned, and extra space is added between the lines. Not only did we make this pretend link red, we also removed the default underline.

This example demonstrates letter-spacing.

Select Code
1
2

.lessspace { letter-spacing: -3px; }
.morespace { letter-spacing: 3px; }
Less Space
More Space

This example demonstrates word-spacing.

Select Code
1

.wordspacing { word-spacing: 30px; }
More space between words.

This example demonstrates white-space.

Select Code
1
2
3

.normalspace { white-space: normal; }
.prespace { white-space: pre; }
.nowrapspace { white-space: no-wrap; }
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.
This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.

CSS Text Properties

Property Description
color: #000000; Sets the color of a text
line-height: normal;
line-height: 17px;
line-height: 110%;		 Sets the distance between lines
letter-spacing: normal;
letter-spacing: 1px;
letter-spacing: -3px;
letter-spacing: 0.5cm;		 Increase or decrease the space between characters.
text-align: left;
text-align: right;
text-align: center;
text-align: justify;		 Aligns the text in an element
text-decoration: none;
text-decoration: underline;
text-decoration: overline;
text-decoration: line-through;		 Adds a rule over, through or underline specified text – used often to remove the underline from links
text-indent: 12px; Indents the first line of text
text-transform: none;
text-transform: capitalize;
text-transform: lowercase;
text-transform: uppercase;		 Controls the letters in an element
white-space: normal;
white-space: pre;
white-space: nowrap;		 Sets how white space inside an element is handled
word-spacing: normal;
word-spacing: 6px;		 Increase or decrease the space between words

Top

Leave a Reply