html tutorial - How to create drop caps effect using CSS - html5 - html code - html form



Answer: Use the CSS ::first-letter Pseudo-element

    You can use the CSS ::first-letter pseudo-element to make lovely drop caps for your articles. Drop caps are merely the primary upper-case letter of a paragraph in a lot of larger font size that has the depth of 2 or a lot of lines of normal text.

    Example

      <!DOCTYPE html>
      <html lang="en">
      <head>
      <meta charset="utf-8">
      <title>Drop Caps with CSS</title>
      <style type="text/css">
          p::first-letter {
              float: left;
              font-size: 6em;
              font-weight: bold;
              line-height: 2;
              text-shadow: 2px 2px 6px #000;
              margin: -0.07em 0.1em -0.1em 0;
          }
      </style>
      </head>
      <body>
          <p>Tempor ipsum dolor sit amet...</p>
      </body>
      </html>

      Related Searches to How to create drop caps effect using CSS