Creating a drop cap with span elements and CSS : drop cap « CSS Controls « HTML / CSS






  1. HTML / CSS
  2. CSS Controls
  3. drop cap

Creating a drop cap with span elements and CSS

  


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>Creating a drop cap with span elements and CSS</title>
<style type="text/css" media="screen">
h1+p {
    font-weight: bold;
    color: #222222;
}
.dropCap span {
    font-size: 4.8em;
    line-height: 1em;
}    
    
.dropCap {
    float: left;
    height: 4.7em;
    margin-top: -0.2em;
    margin-left: -0.4em;
    margin-right: 0.5em;
}
    
</style>
</head>
<body>
  <div id="wrapper">
    <h1>Article heading</h1>
    <p><span class="dropCap"><span>T</span></span>is a test. this is a test. 
    this is a test. 
    this is a test. 
    this is a test.  Sed aliquet elementum erat. Integer diam mi, venenatis non, cursus a, hendrerit at, mi. Morbi risus mi, tincidunt ornare, tempus ut, eleifend nec, risus.</p>
  </div>
</body>
</html>








Related examples in the same category

1.Creating a drop cap using a CSS pseudo-element
2.Drop cap with lineheight, font size and background
3.Drop cap with span
4.Padded Drop Cap
5.This drop cap is lowered without affecting the height of the line.
6.drop cap is aligned up and right, and the text is aligned to the right.
7.Hanging DROP CAPS
8.DROP CAPS: Text is large, bold, and aligned at the baseline. Subsequent lines are not indented.
9.DROP CAPS: The drop cap is aligned to the middle of the text. Subsequent lines are not indented.
10.DROP CAPS: The drop cap is offset to the top of the text. Subsequent lines are not indented.
11.Capotal leading letter