The second part of your question - that you are trying to do this for the first couple of sentences for each chapter - would lead to another discussion.
I use a slightly different approach for my opening paragraph. There is a CSS method that will automatically format the first line of a paragraph
without having to use those spans. That method uses what are called pseudo-elements (
W3Schools link). They are very effective. However, support for them has been lacking in the older reader's apps so you haven't seen them used much. My reader app of choice supports them so I've been using them for years... and the newer apps/readers are providing more support.
Here's how they work:
Code:
<h2>Chapter 1</h2>
<p class="first">This is the first paragraph...yada yada.</p>
<p>This is a normal paragraph.</p>
<p>This is another normal paragraph.</p>
with CSS:
p {text-indent:1.2em; margin:0; line-height:1}
p.first {text-indent:0; font-size:1em; clear:both}
p.first:first-letter {font-family:serif; font-size:2em; font-weight:bold;
float:left; margin:-.1em .1em}
p.first:first-line {font-variant:small-caps; font-size:1.15em}
:first-letter and :first-line allow you to style those parts separately....and then the first-line applies to the first line of the paragraph no matter how many words there are.
I also use the small-caps instead of uppercase so that I can differentiate capital letters in names, etc.
