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
Emphasize It and Grab Their Attention
By BasicTemplates with External CSS

In this article we will discuss a quickie way to emphasize special text and grab your site visitors' attention. This can be achieved quite easily by using a larger font for the first character of a paragraph. You often see this technique done in print such as book (at the beginning of a chapter, for example). It clearly let's your web site visitors know you are changing topics.

The code for this technique is quite simple. We created a custom style definition that utilizes the font-size and color. The code we used is shown below (for an external style sheet), but you can easily change this method to your requirements. If you are not familiar with the different methods of CSS and how or when to use them, be sure to read our article, "External, Internal or Inline? Which Method is Best?"

.emph { font-size: 25px; color: #990000}

Surround the first character of each paragraph that you want to emphasize with the span tag and assign it the emph class. Your HTML source code will look like this:

<span class="emph">I</span>n this article ...

In this example, the first character is 25 pixel in size and a deep red color. You can change the size and color to whatever you choose.