CSS Drop Caps
New Post has been published on https://websitedesigningplus.com/css-drop-caps/
CSS Drop Caps
Use the first-letter Pseudo-Class
The easiest way to create CSS Drop Caps is to use the first-letter pseudo-element on the element you want to have a drop cap. The problem is, this isn’t supported in all browsers. Be sure to test this in the browsers your Web site supports.
Type the following and place it in a style/style element at the top of your Web page:
p.introduction:first-letter font-size : 300%; font-weight : bold; float : left; width : 1em; color :
Then paste this into the body of your document:
p class="introduction" This paragraph has the class "introduction". If your browser supports the pseudo-class "first-letter", the first letter will be a drop-cap. /p
See what it looks like.
Fake CSS Drop Caps In Older Browsers
If the browser you’re writing for doesn’t support the first-letter pseudo-class, you can still create a CSS drop cap. Just use a span tag around the first letter in the element you want to have a drop cap.
Type the following into a style/style element at the top of your Web page:
p.intro .firstletter font-size : 300%; font-weight : bold; float : left; color :
Then put your paragraph up, with the first letter surrounded by span tags.
p class="intro" span class="firstletter"T/spanhis paragraph has a drop-cap on the first character that should be visible to browsers like Internet Explorer 4 and 5. It will work in Netscape 4 as well, but you need to play around with the width of your letter to find the right size. br clear="all" / /p
See what it looks like.
