Sample 2

If you frequent websites that are newspaper publications, you'll notice that usually the first letter has been made into an image. Usually, the webmaster will code to float it left so the words will wrap around it. However, with the attribute first-letter will change the first letter of what you're trying to change without having to use images.

If done correctly. CSS will take this: (please note that the T is an image in the first div)

he mother of our particular hobbit--what is a hobbit? I suppose hobbits need some description nowadays, since they have become rare and shy of the Big People, as they call us. They are (or were) a little people, about half our height, and smaller than the bearded dwarves. Hobbits have no beards. There is little or no magic about them, except the ordinary everyday sort which helps them to disappear quietly when large stupid folk like you and me come blundering along, making a noise like elephants which they hear a mile off.

© 1937 - J.R.R Tolkien - The Hobbit

and using this code:

          #let:first-letter {font-size: 190%;
                                 float: left;
                                 letter-spacing: 2px;
                                 font-family: verdana, arial, sans-serif;
                                 color: #000;} 
       

by inserting <p id="let"> into the HTML code to make it do this...

They are inclined to be fat in the stomach; they dress in bright colours (chiefly green and yellow); wear no shoes, because their feet grow natural leathery soles and thick warm brown hair like the stuff on their heads (which is curly); have long clever brown fingers, good-natured faces and laugh deep fruity laughs (especially after dinner, which they have twice a day when they can get it). Now you know enough to go on with.

© 1937 - J.R.R Tolkien - The Hobbit

Note: You can also do this for the first line of the paragraph, if you were inclined by using the first-line attribute. As follows:

       #ter:first-line {font-size: 125%;
                            float: left;
                            letter-spacing: 2px;
                            font-family: verdana, arial, sans-serif;
                            color: #000;}
       

by inserting <p id="ter"> into the HTML code to make it do this...

As I was saying, the mother of this hobbit--of Bilbo Baggins, that is--was the famous Belladonna Took, one of the three remarkable daughters of the Old Took, head of the hobbits who lived across The Water, the small river that ran at the foot of The Hill. It was often said (in other families) that long ago one of the Took ancestors must have taken a fairy wife. That was, of course, absurd, but certainly there was still something not entirely hobbitlike about them, and once in a while members of the Took-clan would go and have adventures. They discreetly disappeared, and the family hushed it up; but the fact remained that the Tooks were not as respectable as the Bagginses, though they were undoubtedly richer.

© 1937 - J.R.R Tolkien - The Hobbit