Text Style

How do you align text and images? How do you specify text colors? What about other text tricks?

Alignment

text-align positions objects (yes, that says objects) horizontally on a page. I said objects because it can effect images as well as text. Like it's predecessor, ALIGN, the values for this property are LEFT, RIGHT, and CENTER.

Here is an example showing the embedded (HEAD) code to center anything within the P tags.

Here is an example using a CLASS to declare a general center property that can be used by any tags in the BODY area. A DIV tag is being used for the example.

HEAD area

BODY area

vertical-align positions objects vertically in a TABLE format. The values for this property are TOP, MIDDLE, and BOTTOM.

This will vertically align anything within a TD tag to the top of the cell.

Here is an example using a CLASS to declare a general top property that can be used by the tags in the BODY area.

HEAD area

BODY area

float is used to align text with images. The values for this property can be set to LEFT or RIGHT. The value determines where the image is going to appear on the page and then the text is placed opposite to it.

Here is an example using a CLASS to declare a general property that can be used by any tags in the BODY area. A DIV tag is being used for the example.

HEAD area

BODY area

Indenting

Tired of using a TABLE to layout your page to create an indent? How about all of those continuous   codes lined up to create a tab?

Here is an example showing the embedded (HEAD) code to create a proper indenting. In this case, anything within a <p> tag area.

Here is an example using a CLASS to declare a general indent property that can be used by any tags in the BODY area. A DIV tag is being used for the example.

HEAD area

BODY area

The value of text-indent can be specified as inches (in), centimeters (cm), or pixels (px).

To create the first line of text with an overhang (negative indent) a negative number can be used for the value.

Decoration

text-decoration is similar to the <U>nderline tag. This property is also used to create a strikethrough effect Like This. It can also eliminate the line created by linked objects.

The values for text-decoration are underline, line-through, and none.

Here is an example showing the embedded (HEAD) code creating an underline on anything within a P tag.

Here is an example using a CLASS to declare a general underline property that can be used by any tags in the BODY area. A DIV tag being used for the example.

HEAD area

BODY area

Color

The color property isn't an actual text command, but this seems to be the best place to show it. It specifies the color of any text on your page. You can specify the entire page and/or individual areas of text.

Here is an example showing the embedded (HEAD) code creating red text within all the P tags.

Here is an example using a CLASS to declare a general color property that can be used by any tags in the BODY area.

HEAD area

BODY area

To specify the text color for the entire page, the BODY tag can handle the CSS commands just like any other HTML tag.

This is an example to declare the main text of the page as red.

Nesting

Nesting can get confusing, so I don't do it often. It creates a STYLE, then within that STYLE a second STYLE can be used. These are also known as contextual selectors. Best way to see this is through example.

Situation: You want all BOLD text within all P tags to be red.

HEAD area

BODY area

Explanation : The command first looks for any P tags, then IF there are an <b> tags within the <p> tag set, it applies the CSS properties to it.