CSS Text

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,

p {   direction:ltr; }

The following HTML,

<p>LTR Direction</p>

renders

LTR Direction

With a CSS declaration of,

p {   direction:rtl; }

The following HTML,

<p>RTL Direction</p>

renders

RTL Direction

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

8px between letters

line-height

The line-height property specifies the amount of space between lines. For example, with a CSS declaration of,

p {   line-height:30px; }

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-justifiedExamples 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,

p {   text-indent:15px; }

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 performedFor 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,

p {   word-spacing:5px; }

The following HTML,

<p>Words here are separated by 5px.</p>

renders

Words here are separated by 5px.

Dont Miss Another Post Connect With Us ! Enter your email address:

Tweet

Posted in: CSS Tutorial