p:first-letter font-size:32px; : p.first letter « Tags « HTML / CSS






  1. HTML / CSS
  2. Tags
  3. p.first letter

p:first-letter font-size:32px;

     

<?xml version="1.0" encoding="iso-8859-1"?>
<!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">
<head>
<title>CSS Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type='text/css'>
p {
  font-family:arial;
  font-size:12px;
  width:300px;}

p:first-letter{
  font-size:32px;
  font-weight:bold;}
</style>


</head>

<body>
<p>The first letter of this paragraph should be displayed in a larger, 
bold version of the font compared with the text in the rest of the paragraph. 
This technique is commonly used in magazine and newspaper articles. </p>
</body>
</html>








Related examples in the same category

1.p:first-letter font-size: 1.2em;
2.p:first-letter background-color: black;
3.p:first-letter color: white;
4.p:first-line font-weight: bold;
5.p:first-line font-size: 2em;
6.p:first-line background-image: url(http://java2s.com/style/logo.png);
7.p:first-letter font-weight:bold;
8.p:first-line font-size:18px;
9.p:first-line font-weight:bold;
10.p.className::first-letter
11.p.className::first-line
12.p::first-letter background: darkblue;
13.p::first-letter color: white;
14.p::first-letter font: 55px "Monotype Corsiva";
15.p::first-letter float: left;
16.p::first-letter margin-right: 5px;
17.p::first-line font-weight: bold;
18.p::first-line letter-spacing: 3px;
19.p:first-letter font-size: 200%;
20.p:first-letter font-weight: bold;
21.p:first-line font-size: 200%;
22.p::first-letter background: crimson;
23.p::first-letter color: pink;
24.p:first-letter font-size:32px; font-weight:bold;
25.p:first-child background: moccasin;
26.p:first-child border: 1px solid tan;
27.This paragraph uses the first-letter pseudo-element to change the appearance of the first letter in the paragraph.
28.Sink First Letter of a paragraph
29.p::first-letter font-size: 200%;background-color: lightgray;border: 1px solid black;
30.p::first-letter
31.Set the style for first line of P
32.first line pseudo-class
33.drop caps with p:first-letter
34.p#dropcap:first-letter
35.p#initialcap:first-letter
36.p::first-letter font: 120% "Monotype Corsiva"