(CSS)
Examples: Dropcaps
jim.cerny@unh.edu  19-MAY-1998

Results.

This creates a dropcap using a named class called "dropcap-plain". The attribute may not work as expected on Macs, overlapping the next line of text. Lorum ipsum dolor sit amet, consectetuer adipsicing elit, yadda, yadda, yadda.

Now this dropcap variation is the same as the previous paragraph, but with red for the background and white for the font. The named class is called "dropcap-redinv". Lorum ipsum dolor sit amet, consectetuer adipsicing elit, cool stuff.

 

Notes.

The declared classes are defined within a pair of STYLE tags in the HEAD section of the HTML document. They could be defined in an external style sheet that was linked within the HEAD section, instead. The declared class is applied by use of a SPAN tag pair with a CLASS attribute set to the value of the declared class already defined. See the HTML source or look at the abbreviated coding below:

This is a named class for one version of a dropcap. The attributes are specified one per line for legibility, not because such spacing is required by the syntax.

.dropcap-plain { float: left; width: 1em; height: 1em; color: black; background-color:white; font-family: Times,serif; font-weight: bold; font-size: x-large; } It is referenced by: <span class="dropcap-plain">