Creating a drop cap with span elements and CSS

Required files styling-semantic-text-2.html and styling-semantic-text-2.
css from the chapter 3 folder.
What you’ll learn How to create a drop cap for a website, using span elements to aid
positioning.
Completed files drop-cap-with-spans.html and drop-cap-with-spans.css from
the chapter 3 folder. The variant with colored backgrounds uses
the files drop-cap-with-spans-b.html and drop-cap-with-spansb.
css.

1. Add the span elements. Wrap a span element around the first character of the
paragraph and give it a class value of dropCap. Wrap another span element
around the initial character, without any class attribute. The additional span
makes it easier to fine-tune the positioning of the drop cap.
<p><span class="dropCap"><span>L</span></span>orem ipsum dolor […]
2. Size the drop cap. Using a contextual selector, define a font-size setting of 4.8em
for the content of the span element within the dropCap span. This is the height of
three lines of text, from the top of a character in the first line to the bottom of a
character in the third.
.dropCap span {
font-size: 4.8em;
line-height: 1em;
}
3. Float the drop cap. In order for subsequent text to flow around the drop cap, it has
to be floated. This is done via the float: left property/value pair. The display:
block pair sets the dropCap span as a block-level element, enabling you to set edge
dimensions for it. By defining a height value that’s slightly smaller than the
font-size setting, subsequent text won’t sit underneath the drop cap once it’s correctly
positioned.
.dropCap {
float: left;
height: 4.7em;
}

4. Tweak positioning of the drop cap. Use top and left margins (positive and negative)
to move the drop cap into position, so that it correctly lines up with the other text
on the page. The margin-right setting ensures that text to the right of the drop
cap doesn’t hug it.
.dropCap {
float: left;
height: 4.7em;
margin-top: -0.2em;
margin-left: -0.4em;
margin-right: 0.5em;
}
The following image shows what your page should look like so far.

 

5. Review the code and add a colored background. This method also isn’t without its
problems—the span elements have no semantic value and are therefore “bloated
code”; and the values set in steps 2 and 3 require some experimentation for each
different font and paragraph setting you use them with. However, it usually doesn’t
take long to get everything working, and once you have a design, it’s easy enough
to tweak. For example, amend the rules as follows to change the drop cap to one
with a colored background:
.dropCap {
float: left;
height: 3.9em;
margin-top: -0.2em;
margin-left: -0.4em;
margin-right: 0.5em;
border: 1px solid #aaaaaa;
background: #dddddd;
color: #ffffff;
padding: 0.2em 0.6em;
}
.dropCap span {
font-size: 4.0em;
line-height: 1em;
}