Emphasize It and Grab Their Attention

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.