First Line and Letter : Pseudo Class « Style Basics « HTML / CSS






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

First Line and Letter

  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>HTML/XHTML:  &raquo; First Line and Letter</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

<style type="text/css">
p:first-line {background-color: yellow;}
p:first-letter {color: red; font-size: 150%;}
</style>

</head>
<body>

<div class="content">
  <p>CSS selectors can be used to select elements in a variety
  of interesting ways. This is some text to fill up the paragraph.
  This is only text to fill up this paragraph. This should be
  enough text to make this paragraph.</p>
  <p>CSS selectors can be used to select elements in a variety
  of interesting ways. This is some text to fill up the paragraph.
  This is only text to fill up this paragraph. This should be
  enough text to make this paragraph.</p>
</div>
</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.First-letter Pseudo-element
14.Creating a drop cap using a CSS pseudo-element
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