Using the first-letter pseudo-element to create a "drop cap" letter : Pseudo Class « Style Basics « HTML / CSS






  1. HTML / CSS
  2. Style Basics
  3. Pseudo Class

Using the first-letter pseudo-element to create a "drop cap" letter

  
<!DOCTYPE html> 
<html> 
<head> 
<title></title> 
<style type="text/css"> 
body { padding: 0 36px; font-family: cursive; } 
h3 { text-align: center; } 
div p:first-child:first-letter { font-size: 300%; color: #999; } 
</style> 
</head> 
<body> 
<h3>The Raven</h3> 
<div> 
<p>Once upon a midnight dreary, while I pondered, weak and weary, 
Over many quaint and curious volume of forgotten lore&mdash;</p> 
<p>While I nodded, nearly napping, suddenly there came a tapping, As 
of some one gently rapping, rapping at my chamber door.</p> 
</div> 
</body> 
</html>








Related examples in the same category

1.The first-child Structural Pseudo-Class
2.Dynamic Pseudo-Class Selectors
3.first-letter and :first-line Pseudo-Elements
4.Dynamic pseudo-classes
5.Structural pseudo-classes
6.:target pseudo-class
7.h1::before, h1::after content: "::";
8.The first-child pseudo-class
9.Link Pseudo-Class Example
10.:before and :after Pseudo-elements
11.Use Pseudo-Classes
12.First-letter Pseudo-element
13.Creating a drop cap using a CSS pseudo-element
14.First Line and Letter
15.p:first-line{font-weight:bold;}
16.first-letter {font-size:42px; width:200px;}
17.tr:first-child
18.Set style for a:link and a:visited