Text Code

This page contains text code. Feel free to copy and paste the text code into your own website, blog, MySpace page, or other HTML document. And feel free to modify the code as you wish.

Also, please consider keeping the link back to this website - if you do it will be very much appreciated!

About Text Code

When coding HTML pages, you use CSS (Cascading Style Sheets) to style the text on the page. CSS separates text into text-specific properties (starting with the word "text") and font-specific properties (starting with the word "font").

The codes on this page are the "text" specific CSS properties for HTML pages. In other words, these are the CSS properties that start with the word "text". Some text codes don't actually start with "text" or "font" (for example color and background-color). This is because these codes are not specific to text - other HTML elements can use these properties too.

To see the font-specific properties, see font codes.

Text Alignment

To align text in HTML, you use the CSS text-align property. Actually, the text-align property can be used to align any inline element of a block-level element.

Here's a basic example of aligning text to the left, center, and right:

Source Code

Result

<!-- Codes by HTMLcodes.me -->
            <p style="text-align:left;">Text aligned left</p>
            <p style="text-align:center;">Text aligned center</p>
            <p style="text-align:right;">Text aligned right</p>
            <p><a  style="font-size:11px;color:#999;" href="http://www.htmlcodes.me/text/text-code.cfm">HTML text codes</a></p>

Text aligned left

Text aligned center

Text aligned right

Text Decoration

The text-decoration property allows you to add decoration to - or remove decoration from - your text. A common use of this property is to remove the underline from hyperlinks.

Here are examples of what you can use the text-decoration property for. Note that blink doesn't work on all browsers.

Source Code

Result

<!-- Codes by HTMLcodes.me -->
            <p><a style="text-decoration:none;" href="http://www.htmlcodes.me">Where's my underline gone?</a></p>
            <p style="text-decoration:underline;">Sorry, I borrowed your underline.</p>
            <p style="text-decoration:line-through;">I'll see if I can lift it above my head...</p>
            <p style="text-decoration:overline;">I did it!</p>
            <p style="text-decoration:blink;">Yay!!!</p>
            <p><a  style="font-size:11px;color:#999;" href="http://www.htmlcodes.me/text/text-code.cfm">HTML text codes</a></p>

Where's my underline gone?

Sorry, I borrowed your underline.

I'll see if I can lift it above my head...

I did it!

Yay!!!

Text Indent

The text-indent property allows you to indent the first line of text in a paragraph. Here are some examples:

Source Code

Result

<!-- Codes by HTMLcodes.me -->
            <p style="text-indent:20px;width:200px;">The first line of this paragraph is indented by 20 pixels. Subsequent lines of text are not indented.</p>
            <p style="text-indent:3em;width:200px;">The first line of this paragraph is indented by 3 em. This is simply another way of specifying the amount of indent. </p>
            <p style="text-indent:50%;width:200px;">The first line of this paragraph is indented by 50%. This is 50% of the containing block - not this paragraph.</p>
            <p style="text-indent:-10px;width:200px;">The first line of this paragraph is indented by a negative amount (-10 pixels). </p>
            <p><a  style="font-size:11px;color:#999;" href="http://www.htmlcodes.me/text/text-code.cfm">HTML text codes</a></p>

The first line of this paragraph is indented by 20 pixels. Subsequent lines of text are not indented.

The first line of this paragraph is indented by 3 em. This is simply another way of specifying the amount of indent.

The first line of this paragraph is indented by 50%. This is 50% of the containing block - not this paragraph.

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

CSS Drop Shadow

The CSS text-shadow property allows you create a drop shadow against your text. The 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

<!-- Codes by HTMLcodes.me -->
            <p style="font-size:18px;color:orange;text-shadow:1px 1px 1px #666;">Text code for a drop shadow</p>
            <p style="font-size:18px;color:orange;text-shadow:1px 1px 1px #000;">Text code for a drop shadow</p>
            <p style="font-size:18px;text-shadow:4px 4px 4px #666;">Text code for a drop shadow</p>
            <p style="font-size:18px;color:orange;text-shadow:4px 4px 8px #666;">Text code for a drop shadow</p>
            <p style="font-size:18px;color:#fff;text-shadow:1px 1px 8px #000;">Text code for a drop shadow</p>
            <p><a  style="font-size:11px;color:#999;" href="http://www.htmlcodes.me/text/text-code.cfm">HTML text codes</a></p>

Text code for a drop shadow

CSS Transform

The CSS text-transform property allows you to change the case of the text. For example, you can capitalize text (also known as "Title Case") or change the text to uppercase. Here are some examples:

Source Code

Result

<!-- Codes by HTMLcodes.me -->
            <p style="text-transform:capitalize;">Text code for capitalizing text (also known as title case)</p>
            <p style="text-transform:uppercase;">Text code for uppercase text</p>
            <p style="text-transform:uppercase;">Here, we override uppercase text with <span style="text-transform:none;">text-transform:none;</span></p>
            <p><a  style="font-size:11px;color:#999;" href="http://www.htmlcodes.me/text/text-code.cfm">HTML text codes</a></p>

Text code for capitalizing text (also known as title case)

Text code for uppercase text

Here, we override uppercase text with text-transform:none;

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