Skip To Main Content | Home | Sitemap | Contact
Latest Visitors: United States's flagUnited States's flagItaly's flagIndia's flagIndia's flagUnited States's flagFrance's flagRussian Federation's flagGermany's flagIsrael's flagItaly's flagUnited States's flagChina's flagChina's flagUnited States's flagIndia's flagUnited States's flagUnited States's flagChina's flagUnited States's flagRussian Federation's flagChina's flagUnited States's flagUnited States's flagSouth Africa's flag
 

How can you make the first line of the paragraph different style (color)?

CSS has pseudo classes, including one called "first-line" which as the name implies will allow you to apply a style to the first line of a paragraph which can be different from the rest of the paragraph.

First line is orange, bold and large.
Remaining text is black. Remaining text is black. Remaining text is black. Remaining text is black. Remaining text is black. Remaining text is black. Remaining text is black. Remaining text is black. Remaining text is black. Remaining text is black. Remaining text is black. Remaining text is black. Remaining text is black. Remaining text is black. Remaining text is black.



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="author" content="Roderick Divilbiss">
<meta name="copyright" content="© 2005-2010 Roderick Divilbiss">
<style>
p:first-line {
    color: #FF9900;
    font-weight:bold;
    font-size:18px;
}
</style>
</head>

<body>
<p>Intro Is Purple<br>
Remaining text is black. Remaining text is black. Remaining text is black. Remaining text is black. Remaining text is black. Remaining text is black. Remaining text is black. Remaining text is black. Remaining text is black. Remaining text is black. Remaining text is black. Remaining text is black. Remaining text is black. Remaining text is black. Remaining text is black.
</p>
</body>
</html>