Easy Web Design, 3rd Edition
  EWD Projects :: Chapter 8
 

Chapter 8: Demystifying Basic CSS and XHTML


Chapter 8: Demystifying Basic CSS and XHTML

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.


Next section

top of page