09 Add a drop capital to the text

A drop capital is often used at the start of a piece of text to lead the reader in and signpost where to start reading. The effect consists of taking the first letter from the first word of the paragraph, and making it twice as large; it occupies space in the lines of text beneath and adds a huge amount of impact to the text. Traditionally, achieving this effect would require additional markup in your HTML – you’d need to wrap the first character of the first word in a span with a class or ID, and target that from your CSS. With the advent of CSS2, however, the W3C introduced the :first-letter pseudo element, which you can use to grab the character without the use of extraneous tags. You need to be careful to ensure browser compatibility, however; Internet Explorer 6 will support this class, but only if you leave a space between the selector and the brace, eg, p:first-letter { not p:first-letter{. We’re going to style this to be six and a half times the size of the standard body text. We’ll float it left to ensure the rest of the paragraph wraps nicely around it, and give it some margin to prevent text from crashing into it. You’ll also notice that we’ve set a line height and given it padding. One of the limitations of the pseudo element is that it doesn’t support all the normal CSS properties. We can’t set the height of the element box, so instead we use line-height as a surrogate to get the correct alignment. To achieve the best results, you should expect to have to experiment with these settings when using this technique for your own projects. Add the code below to drop the first letter of the first paragraph:

/* Create the drop cap */
p.first:first-letter {
padding: 0.1em;
line-height: 0.7em;
color: black;
font-size: 6.5em;
float: left;
margin-right: 0.1em;
margin-bottom: 0.1em;
}

10 Give it a background to be proud of

It’s really starting to come together now as a whole. Let’s increase the impact of the drop capital by reversing it out. You could add a background colour to the rules we just set, as well as setting the foreground colour to white, but the texture of the book image would also work quite nicely. So now add the following code inside your p.first:first-letter rule, and then preview the page in your browser:

background: transparent url(../images/Timemachinebook.JPG)
no-repeat center center;
border: 1px solid #83201a;

11 Final polish

Finally, add the finishing touches by styling the quote elements (q) to have a different colour to the main body text, and using the :first-line pseudo element to add small capitals to the first line of the first paragraph:

/* Set the first line of the first paragraph to use small caps */
p.first:first-line {
font-variant: small-caps;
}

/* Set the speech to be darker in colour than the narrative text */
q {
color: black;

Pages: 1 2 3