First-letter Pseudo-element : Pseudo Class « Style Basics « HTML / CSS






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

First-letter Pseudo-element

 

<!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>First-letter Pseudo-element</title>
  <style type="text/css" media="screen">
    body {
      padding:.5em;
      font-family:"lucida grande", sans-serif;
    }
    
    p {
      font-size:100%;
    }

    p#dropcap:first-letter {
      font-size:300%;
      font-weight:bold;
      float:left;
    }
    
    p#initialcap:first-letter {
      font-size:400%;
      font-weight:bold;
    }
    
  </style>
  
</head>

<body>
  <p id="dropcap">Gorillas dont always eat bananas, all cows eat grass, good boys do fine always, and fat cops get donuts after every bust.</p>
  
  <p id="initialcap">Gorillas dont always eat bananas, all cows eat grass, good boys do fine always, and fat cops get donuts after every bust.</p>
</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.Using the first-letter pseudo-element to create a "drop cap" letter
10.Link Pseudo-Class Example
11.:before and :after Pseudo-elements
12.Use Pseudo-Classes
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