|
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
Copyright © 2013 1keydata.com All Rights Reserved Privacy Policy
|