Formatting Your Text/CSS

Since the HTML <font> tag has been depreciated, you should use CSS to define the text properties. Defining what you want your text to look like with CSS is simple. There are many CSS attributes for text. These elements are very similar to the <font> tag of HTML 4.01. Perhaps most importantly CSS gives the designer far more control over choice of typeface, font weight and style.

Take a look at the paragraph below and the source code. We are using inline CSS for this demonstration and is just a small sample of what can be done.

This paragraph has several examples of what you can do with CSS. Take a look at the source code below and see how we did all the different things in this paragraph. There is a lot more you can do with CSS and text. The possibilities are endless, and the final result looks just about the same in any current browser. Do some more research on CSS and have SOME FUN FORMATTING! See our Links page for a great CSS generator.

<div style="border: 1px solid #d4dda6; background: #ecf0da; padding: 12px; margin-top: 12px;">

<div style="font-family: arial, helvetica, sans-serif; font-size: 11px; line-height: 24px; text-align: justify; text-indent: 20px; margin-top: 0px; margin-bottom: 0px;">
This paragraph has several <span style="font-size: 10px; color: #660033;">examples</span> of what you can do with CSS. Take a look at the source code <span style="border-top: 1px dashed #22b26c; border-bottom: 1px dashed #22b26c;">below</span> and see how we did all the <span style="font-family: comic sans ms, arial, helvetica, sans-serif; font-size: 18px;">different</span> things in this paragraph. There is <span style="border-bottom: 2px dotted #a42aa4;">a lot more</span> you can do with CSS and text. The <span style="border: 1px solid #000000;">possibilities</span> are endless, and the final result <span style="background-color: #b2b222;">looks</span> just about the same in any current browser. Do some more <span style="font-variant: small-caps; color: #660033">research</span> on CSS and have <span style="background-image: url(img/back_2.gif);"><b>SOME FUN FORMATTING!</b></span> See our <a href="links.asp" title="Links">Links</a> page for a great CSS generator.
</div>

</div>

To Top TO TOP