Neal Grosskopf Dot Com A NG Designs Site

Neal Grosskopf Dot Com Return To Neal Grosskopf's Home Page a NG Designs Site

Toolbar

  • Skip To
    • Menu
    • Content
  • Validate
    • HTML
    • CSS
    • WAI
  • Font Size
    • Small
    • Medium
    • Large
    • Extra Large
  • Account
    • Create Account
    • Login

Interact

Navigation

  • Home
  • Interact
    • Blog
    • Message Board
    • Open Links
    • Open Videos
    • Photo Gallery
    • Polls
    • Reviews
    • Geek Speak
  • Designs
    • View All Designs
    • Professional
    • Corporate
    • Templates
    • Personal
    • Club
    • NG Designs
    • Web Guides
  • Files
    • Artwork
    • Wallpapers
    • My File Downloads
  • Extras
    • Bookmarklets
    • The Magic 8-Ball
    • Career Builder RSS Feed Generator
    • Monster.com RSS Feed Generator

CSS Drop Caps Without Unnecessary HTML Elements or Classes

  • Actions
    • View All
    • View Article Statistics
    • View User Statistics
    • Search
    • Subscribe to RSS Feed

Recent Articles:

  • Tracking Outgoing Links in Google Analytics Using Event Tracking and jQuery
  • Tracking Internal Website Campaigns With Google Analytics and PHP
  • Everything You Need to Know About jQuery's .data() Method
  • Google vs. China: How It Will Affect Web Workers
  • Don't Like The New Facebook Home Page? Fix It With 5 Lines of CSS
View All

Subscribe To Feed
loading Subscribers

I'm On Twitter loading

Mar 25

Drop capitals are commonly seen in newspapers or books. They can be identified by looking at the first letter of a paragraph or a page that is usually larger than the rest of the paragraph, bolded and often times a different font-family.

I've seen many different methods to achieve this effect in HTML and CSS, most of the time the method requires unnecessary elements or classes. I'll give an example of how to do drop caps in CSS without any classes, and then I'll show you a second method which will require you to place a single class on the parent element.

Styling Our Drop Cap in CSS Without Classes

The first option is if you want to style the first P element on every page of your website with a drop cap. The selector below will first use the :first-child pseudo selector to find our first P element and then it will select the first letter of the P element with the first-letter pseudo selector.

I've added some other visual effects to our drop cap such as a background-color, font-family, text-transform, and a double'd border which is seldom used.

body p:first-child:first-letter { background: #990000; border: 4px double #ffcc00; color: #ffffff; float: left; font-family: "Times New Roman", Times, serif; font-size: 3em; font-weight: bold; margin: 7px 10px 0px 0px; padding: 10px; text-transform: uppercase; }

View Demo >>

Using A Class

You may also want to selectively apply a drop cap to other blocks of text on your website. In this case, simply add a class to the paragraph and add this selector to your CSS:

.dropcap { ... }

Tags: css ( Add Tag )

Bookmark This Page:
  • Digg loading
  • Delicious loading
  • Re-Tweet loading
  • StumbleUpon loading
  • DZone loading
  • Snipplr
  • Script & Style

Replies:

  • Wahhab Baldwin
    Wahhab Baldwin
    #1

    Tue. July 27, 10:46:32 AM

    Like most articles on Drop Caps I've found on the web, your approach fails on Internet Explorer 6 & 7. Have you found a solution that works for those browsers as well?

    Thanks for a lovely site.


Reply:

B U I Link Font Color Edit Preview ?
Characters: 0 Textbox Size: [+] [-]
   

  • New Comment
    #2

    Sat. July 31, 1:23:32 PM

Font Size:

  • A
  • A
  • A
  • A

Search:

Places:

  • Blog
  • Message Board
  • Chat Room
  • Geek Speak
  • Open Videos
  • Reviews
  • Tag Cloud
 

Site Links

Site

  • About
  • Contact Me
  • Site Map
  • Site Search

Interact

  • Blog
  • Geek Speak
  • Message Board
  • Open Links
  • Open Videos
  • Photo Gallery
  • Polls
  • Reviews

Random Stuff

  • Hosting by FatCow
  • © Copyright 2005 - 2010
  • Modified: Friday, July 16, 2010
  • Load Time: 0.14 Seconds

Site Coded And Designed By Neal Grosskopf Using No Crappy CMS Or Themes