Capitalize the first letter of a paragraph with CSS

Books twenty or thirty year ago use to have the first letter of a chapter set off differently than the rest of the lettering in the chapter.  It was a single letter with flowery font that was much larger than the rest of the font on the page.  Publishers called them drop caps.  You remember those, don't you?

With the advent of the Internet, good punctuation and grammar has changed from those old days.  I think email and web url addresses have changed a lot of the way we punctuate and write.  Here are some of the things, I've noticed, that are in display in this article.

Paragraphs are now separated by a space, they didn't use to be in books.  This makes it easier to read on the screen. It use to be, probably because the lines were not separated, that all paragraphs started out with the first line of the text indented, they don't now.  Fonts use to be mostly serifs with flowery curls on the letters in books, the web uses mostly sans-serif, without the flowery curls, for easier reading. The most prevalent font being verdana.

And then we come to punctuation, when you end the sentence with a web address, there's always the question of, do you end the sentence with a period, that may interfere with the web address.  This happens with other technical jargon.  If you want to show the proper syntax of how to write a function or command, you don't want to use a period that may be confused with part of the syntax, so you just leave the period off, and start a new sentence with a capital letter.  The web has indeed changed the look of our writing.

The designers of CSS wanted to accommodate every one, so they even made allowances for those dusty old scholarly types that, though ancient cities, still wrote with the "King's English."  I've found that, like all things in life,  "What comes around, goes around," and things like paragraph indents, and drop caps now make a web site look different and refreshing.  They give you a different look that in many ways make the text easier to read.

Let's talk about how to put drop caps on your web site. There's such a thing in CSS called pseudo elements.  Currently with CSS2 there are four of them.  Pseudo elements are called pseudo, because they're not part of your standard html markup.  There is no "first letter" html tag, just the "p" for new paragraph.  Yet CSS recognizes these as if they were a normal selector.

The four pseudo elements are: before, after, first-letter, and first-line.  Before and after insert content before a block element and after a block element, respectfully, and are used with content that is generated dynamically, like with CMS systems.  First-letter is what you use to do drop-caps, and first-line will allow you to style the entire first line of a paragraph.

Let's start with the html you'll use.  You should use html as you normally do with paragraph tags around every paragraph, with one exception.  If you just want to style the first letter, or the first line, in the very first paragraph only, and not in every paragraph, you will have to identify that first paragraph with an id or class tag.  Other than that the pseudo element in CSS will take care of the rest.

First off, pseudo elements only work on block-level tags, like: p, blockquote, and h1, for example. And when you use them as a selector in CSS, the pseudo element has to be the last element in the selector chain, as shown here.

#car #carcolor p:first-letter {

} 

Pseudo elements also only allow you to use properties that make sense to style the pseudo element.  With :first-letter you can use: font properties, text decoration, text transform, letter spacing, word spacing, line height, vertical-align (not when using floats), margin, padding, border, color and background.  Mostly anything to do with placing that first letter on your page.  The "first-line" uses the same elements with the exception of margin, padding, and border which are styled in the paragraph.

Rather than get bogged down in only use this or that, I recommend you just use them naturally, and you'll find that they work the way you expect.  How do you use them?

In your CSS style sheet, if you would like to capitalize the first letter of every paragraph on the page, you would write:

p:first-letter {
font-size: 300%;
font-family:  garamond, bodoni, curly, times, serif;
color: orange;
padding-right: 1px;
position:relative;
margin-left: -26px;
}

Simple.  If you like to know what this looks like, take a look at the first letter of each paragraph in this article. This is the CSS styling I used to style this page.


Comments

Capitalize the first letter of a paragraph with CSS — 5 Comments

  1. Great blog. Any advice how you can do this for the first letter only. Not of every paragraph. Just the first letter of the first sentence of the blog. Many thanks

    • You could assign a class to the first paragraph, and then use the pseudo element,, “first-letter” to change the first letter of that paragraph. Something like this,
      “.thepara:first-letter { }”
      If you wanted the entire first line only, you could use “.thepara:first-line { } ”
      Note, you want to put a space between the end of the selector and the first of the curly braces to fix an IE6-only bug.

    • There are a couple of solutions you can try. The CSS psuedo classes first-line and first-letter are not supported in IE6. Why am I not surprised? However, they are supported in IE7 on up, as they are in every other browser. Here’s your solutions, if your running WIndows 7 you can download and install IE9. If your not, you can download and install IE8, and your problem will be fixed. If for some reason you can not download a more recent browser than IE6, try putting a space after the psuedo class, for example: p:first-lertter(color:red:} does not work, but p:first-letter {color:red} might. Note the space between the “r” and “{“. In IE6 and below, there needs to be a space between selector and declaration block.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>