Here are the most commonly-used CSS properties related to text.
direction
letter-spacing
line-height
text-align
text-decoration
text-indent
text-transform
word-spacing
direction
The direction property specifies the text direction. Possible values are 'ltr' and 'rtl'.
For example, with a CSS declaration of,
The following HTML,
renders
With a CSS declaration of,
The following HTML,
renders
letter-spacing
The letter-spacing property specifies the amount of space between characters. For example, with a CSS declaration of,
|
p {
letter-spacing:8px;
}
|
The following HTML,
|
<p>8px between letters</p>
|
renders
line-height
The line-height property specifies the amount of space between lines. For example, with a CSS declaration of,
The following HTML,
|
<p>30px between line 1<br>and line 2.</p>
|
renders
|
30px between line 1
and line 2.
|
text-align
The text-align property specifies how text is justified. Possible values are:
left: left-justified
right: right-justified
center: text is centered
justified: text is both right- and left-justified
Examples below:
| CSS Declaration | Output |
|
p {
text-align:left;
}
|
This sentence illustrates what it looks like to be left-justified.
|
|
p {
text-align:right;
}
|
This sentence illustrates what it looks like to be right-justified.
|
|
p {
text-align:center;
}
|
This sentence illustrates what it looks like to be centered.
|
|
p {
text-align:justify;
}
|
This sentence illustrates what it looks like to be fully-justified.
|
text-decoration
The text-decoration property specifies how text is decorated. Possible values are:
underline: adds an underline to the text
overline: adds a line on top of the text
line-through: adds a line through the middle of the text.
blink: causes the text to blink.
Examples below:
| CSS Declaration | Output |
|
p {
text-decoration:underline;
}
|
An underline example
|
|
p {
text-decoration:overline;
}
|
An overline example
|
|
p {
text-decoration:line-through;
}
|
A strikethrough (line-through) example
|
text-indent
The text-indent property specifies how much space to indent before the first line of the text in a block. Both length and percentage can be used. For example, with a CSS declaration of,
The following HTML,
|
<p>This text is indented by 15px at the beginning of the paragraph. Subsequent lines are not indented.</p>
|
renders
|
This text is indented by 15px at the beginning of the paragraph. Subsequent lines are not indented.
|
text-transform
The text-transform property controls how upper and lower cases are displayed. Possible values are:
capitalize: capitalizes the first letter in a word
uppercase: makes the entire word upper case
lowercase: makes the entire word lower case
none: no transform is performed
For example, if we apply each of the following CSS style to the text "this is a LAWYER", we get the following:
| CSS Declaration | Output |
|
p {
text-transform:capitalize;
}
|
this is a LAWYER
|
|
p {
text-transform:uppercase;
}
|
this is a LAWYER
|
|
p {
text-transform:lowercase;
}
|
this is a LAWYER
|
word-spacing
The word-spacing property controls the amount of space between words. For example, with a CSS declaration of,
The following HTML,
|
<p>Words here are separated by 5px.</p>
|
renders
|
Words here are separated by 5px.
|
Next: CSS Float
Link to this page: If you find this page useful, we encourage you to link to this page. Simply copy and paste the code below to your website, blog, or profile.
Copyright 1keydata.com 2007, 2008, All Rights Reserved. Privacy Policy
|
|