p:first-letter font-weight: bold; : p.first letter « Tags « HTML / CSS






p:first-letter font-weight: bold;

     
<html>
<head>
  <title></title>
<style type="text/css">
  * {
   font-family: verdana, arial, sans-serif;
  }
  h1 {
   font-size: 120%;
  }
  #navigation {
   border: 1px solid black;
   padding: 40px;
  }
  li a {
   text-decoration: none;
  }
 
  p {
   font-size: 90%;
  }
  .warning {
   font-weight: bold;
  }
  p:first-letter {
  font-size: 200%;
  font-weight: bold;
  }
</style>
</head>

<body>
  <h1>Title of Page</h1>

  <p>This is a sample paragraph with a <a href="http://csscookbook.com" class="warning">link</a>. 
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore 
  magna <em class="warning">aliquam erat volutpat</em>. Ut wisi enim ad minim veniam, quis nostrud exerci 
  tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

  <ul id="navigation">
    <li class="warning"><a href="http://csscookbook.com">Apples</a></li>

    <li><a href="http://csscookbook.com">Bananas</a></li>

    <li><a href="http://csscookbook.com">Cherries</a></li>
  </ul>
</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-size:32px;
8.p:first-letter font-weight:bold;
9.p:first-line font-size:18px;
10.p:first-line font-weight:bold;
11.p.className::first-letter
12.p.className::first-line
13.p::first-letter background: darkblue;
14.p::first-letter color: white;
15.p::first-letter font: 55px "Monotype Corsiva";
16.p::first-letter float: left;
17.p::first-letter margin-right: 5px;
18.p::first-line font-weight: bold;
19.p::first-line letter-spacing: 3px;
20.p:first-letter font-size: 200%;
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"