shadowline
Font Style << Text Style >> Link 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.
<style type="text/css">
<!--
p {text-align: center;}
-->
</style>

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 <style type="text/css">
<!--
.IMGcntr {text-align: center;}
-->
</style>


BODY area <div class="IMGcntr">
<img src="sample.gif">
The image and this text is centered.
</div>



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.
<style type="text/css">
<!--
td {vertical-align: top;}
-->
</style>

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 <style type="text/css">
<!--
.topoff {vertical-align: top;}
-->
</style>


BODY area <table>
<tr>
<td class="topoff">
<img src="sample.gif">
The image and this text are top aligned.
</td>
<td>
This text is vertically centered by default.
</td>
</tr>
</table>



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 <style type="text/css">
<!--
.GoRight {float: right;}
-->
</style>


BODY area <img src="sample.gif" class="GoRight">
This text will appear on the LEFT to the image.



Indenting

Tired of using a TABLE to layout your page to create an indent? How about all of those continuous &nbsp; 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.
<style type="text/css">
<!--
p {text-indent: 1in;}
-->
</style>

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 <style type="text/css">
<!--
.tab {text-indent: 1in;}
-->
</style>


BODY area <div class="tab">
This line of text is indented by one inch.
</div>
This line of text is not indented.

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.
<style type="text/css">
<!--
p {text-decoration: underline;}
-->
</style>

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 <style type="text/css">
<!--
.example {text-decoration: underline;}
-->
</style>


BODY area <div class="example">
This text is underlined.
</div>
This line of text is not underlined.



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.
<style type="text/css">
<!--
p {color: #ff0000;}
-->
</style>

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 <style type="text/css">
<!--
.red {color: #ff0000;}
-->
</style>


BODY area <p class="red">
This line of text is red.
</p>
This line of text is not red.

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.
<style type="text/css">
<!--
body {color: #ff0000;}
-->
</style>



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 <style type="text/css">
<!--
P B {color: #ff0000;}
-->
</style>


BODY area <H2> This text <b> is not red. </b></H2>
<p>This next text <b> is red. </b></p>
<p>This text is regular and not red. </p>

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.
Font Style << Text Style >> Link Style
shadow

Advertise in the banner along the top, Click here!

Valid XHTML 1.0 Transitional Valid CSS! Text Link Ads
shadow
shadow