Printed from BasicTips.com, FREE helpful articles and tips for Webmasters and Business Owners
Copyright © 1994-2006 by BasicTips.com, a division of BasicTemplates.BIZ
All rights reserved. Republication in whole or in part in any form is not permitted.

Sponsored by BasicTemplates.BIZ
Website Templates with External CSS and Removable Graphics
http://www.BasicTemplates.biz

Co-Sponsored by Effective-Website-Secrets.com
Teaching webmasters effective web development and marketing techniques via free podcasts.
http://www.Effective-Website-Secrets.com

Category: CSS
Cosmetic Customizations to the "Current Date" Feature
By BasicTemplates with External CSS

To find out what the current feature is all about, and why you might want to use it on your site, read our Web Design Article, "What is the Current Date?".

Another article you should read is "External, Internal or Inline? Which Method is Best?" to familiarize yourself with why "external" style sheets is the most effective method to use on your site.

Ready to learn how to customize your current date feature utilizing CSS (cascading style sheets)? You will find it easy to do, easy to change and pleasing to the eye.

Place the following code in your external style sheet:
.date { font-family: Geneva, Arial, Helvetica, san-serif; font-size: 12px; font-style: italic; color: #999999; text-align: center}

What does this mean and how can you change it to fit your own needs? First of all, we created a style "class" and name it "date". We specified the following cosmetic characteristics:

font-family: Geneva, Arial, Helvetica, San-serif (change these fonts to whatever you wish and separate each with a comma)

font-size: 12 px (change the size to whatever you wish but be sure to keep it in pixels)

font-style: italic (change the style to whatever you wish: normal, italic, oblique)

color: #999999 (change the color to whatever you wish using a hex color code)

text-align: center (change the alignment to whatever you wish: left, right, center, justify)

We then assigned this date class to the HTML table cell in our web page that displays the date. You can assign it to any HTML tag that makes sense for this feature such as the p (paragraph) tag or span tag too.
<td class="date">

A working example of what this cosmetic CSS customization looks like is shown on the live example page.