Dropping in a Drop Cap

Creating a drop cap is a good exercise in using many of the CSS text properties. After you define the drop cap property values, you simply use a <span></span> tag pair around the body text you want to format as a drop cap. Here’s the process:

1.      Open your presentation style sheet in your text editor, click under the footer_links class, and press ENTER.

2.      Type the following style (at this point in the walkthrough, most of the properties should look familiar):

.dropcap {

    float: left;

    position: relative;

    font-family: Verdana, Arial, sans-serif;

    font-size: 200%;

    font-weight: bold;

    color: #D1D1D1;

    line-height: 1em;

    margin: 3px 6px 4px 0;

    padding: 2px 6px 4px 6px;

    border: 1px solid #CC9966;

    background: #952C29;

    }

 

3.      Save your work.

4.      Open index.html in your text editor.

5.      In the centercolumn area, click after </h1>, and press ENTER twice.

6.      Type (or copy and paste) the following paragraph text, which includes paragraph tags, the dropcap class, and emphasis (italic) formatting:

<p><span class="dropcap">L</span>ong before the Internet, there was <em>The Road.</em> Roadways have served as the lifeblood of communication for centuries. Reliable and romantic, roads have contributed more to our cultural history than pizza and French fries combined. After all, you know what they say:</p>

 

7.      Save your work.

8.      If desired, preview index.html in your browser window.