Text Code

The following text codes are the ones that start with the word "text". For example, text-align, text-indent, text-shadow etc. To change the font, see the font codes.

Aligning Text

Use the CSS text-align property to align your text (or any other inline element of a block-level element):

Source Code	Result
<p style="text-align:left;">Left</p> <p style="text-align:center;">Center</p> <p style="text-align:right;">Right</p>	Left Center Right

Source Code

Result

<p style="text-align:left;">Left</p>
<p style="text-align:center;">Center</p>
<p style="text-align:right;">Right</p>

Left

Center

Right

Decorating Text

Below are examples of the CSS text-decoration property for:

Source Code	Result
<p><a style="text-decoration:none;" href="//www.html.am">Link with no underline...</a></p> <p style="text-decoration:underline;">Normal text with underline</p> <p style="text-decoration:line-through;">Text with a line through the middle</p> <p style="text-decoration:overline;">Text with an overline</p> <p style="text-decoration:blink;">Blinking text (doesn't work on all browsers)</p>	Link with no underline... Normal text with underline Text with a line through the middle Text with an overline Blinking text (doesn't work on all browsers)

Source Code

Result

<p><a style="text-decoration:none;" href="//www.html.am">Link with no underline...</a></p>
<p style="text-decoration:underline;">Normal text with underline</p>
<p style="text-decoration:line-through;">Text with a line through the middle</p>
<p style="text-decoration:overline;">Text with an overline</p>
<p style="text-decoration:blink;">Blinking text (doesn't work on all browsers)</p>

Link with no underline...

Normal text with underline

Text with a line through the middle

Text with an overline

Blinking text (doesn't work on all browsers)

Indenting Text

Indent the first line of text in a paragraph with the text-indent property:

Source Code	Result
<p style="text-indent:18px;width:200px;">The first line of this paragraph is indented by 18 pixels. Each subsequent line is not indented.</p> <p style="text-indent:2.8em;width:200px;">The first line of this paragraph is indented by 2.8 em. An em defines the proportion of the letter width and height with respect to the point size of the current font.</p> <p style="text-indent:35%;width:200px;">The first line of this paragraph is indented by 35% (i.e. 35% of the containing block - not this paragraph).</p> <p style="text-indent:-8px;width:200px;">The first line of this paragraph is indented by a negative amount (-8 pixels). </p>	The first line of this paragraph is indented by 18 pixels. Each subsequent line is not indented. The first line of this paragraph is indented by 2.8 em. An em defines the proportion of the letter width and height with respect to the point size of the current font. The first line of this paragraph is indented by 35% (i.e. 35% of the containing block - not this paragraph). The first line of this paragraph is indented by a negative amount (-8 pixels).

Source Code

Result

<p style="text-indent:18px;width:200px;">The first line of this paragraph is indented by 18 pixels. Each subsequent line is not indented.</p>
<p style="text-indent:2.8em;width:200px;">The first line of this paragraph is indented by 2.8 em. An em defines the proportion of the letter width and height with respect to the point size of the current font.</p>
<p style="text-indent:35%;width:200px;">The first line of this paragraph is indented by 35% (i.e. 35% of the containing block - not this paragraph).</p>
<p style="text-indent:-8px;width:200px;">The first line of this paragraph is indented by a negative amount (-8 pixels). </p>

The first line of this paragraph is indented by 18 pixels. Each subsequent line is not indented.

The first line of this paragraph is indented by 2.8 em. An em defines the proportion of the letter width and height with respect to the point size of the current font.

The first line of this paragraph is indented by 35% (i.e. 35% of the containing block - not this paragraph).

The first line of this paragraph is indented by a negative amount (-8 pixels).

Create a Drop Shadow

The CSS text-shadow property accepts 4 values. The first two specify the vertical and horizontal offsets, the third one specifies the radius of the blur. The fourth value specifies the color of the drop shadow. Here are some examples:

Source Code	Result
<p style="font-size:18px;color:orange;text-shadow:1px 1px 1px #666;">Drop shadow 1</p> <p style="font-size:18px;color:orange;text-shadow:1px 1px 1px #000;">Drop shadow 2</p> <p style="font-size:18px;text-shadow:4px 4px 4px #666;">Drop shadow 3</p> <p style="font-size:18px;color:orange;text-shadow:4px 4px 8px #666;">Drop shadow 4</p> <p style="font-size:18px;color:#fff;text-shadow:1px 1px 8px #000;">Drop shadow 5</p>	Drop shadow 1 Drop shadow 2 Drop shadow 3 Drop shadow 4 Drop shadow 5

Source Code

Result

<p style="font-size:18px;color:orange;text-shadow:1px 1px 1px #666;">Drop shadow 1</p>
<p style="font-size:18px;color:orange;text-shadow:1px 1px 1px #000;">Drop shadow 2</p>
<p style="font-size:18px;text-shadow:4px 4px 4px #666;">Drop shadow 3</p>
<p style="font-size:18px;color:orange;text-shadow:4px 4px 8px #666;">Drop shadow 4</p>
<p style="font-size:18px;color:#fff;text-shadow:1px 1px 8px #000;">Drop shadow 5</p>

Drop shadow 1

Drop shadow 2

Drop shadow 3

Drop shadow 4

Drop shadow 5

Transform Text

To change the case of your text, use the text-transform property. For example, you can Capitalize Text or change it from lowercase to UPPERCASE (or vice-versa). Here are examples:

Source Code	Result
<p style="text-transform:capitalize;">capitalized text (also known as title case)</p> <p style="text-transform:uppercase;">uppercase text</p> <p style="text-transform:lowercase;">TALK QUIETLY</p>	capitalized text (also known as title case) uppercase text TALK QUIETLY

Source Code

Result

<p style="text-transform:capitalize;">capitalized text (also known as title case)</p>
<p style="text-transform:uppercase;">uppercase text</p>
<p style="text-transform:lowercase;">TALK QUIETLY</p>

capitalized text (also known as title case)

uppercase text

TALK QUIETLY

To do things like change font, set it to bold or italics etc, see these font codes.