First-line and First-letter Pseudo attribute in css

In css, give two most useful pseudo attribute that are:

1. First-line : it is effect in first line of given paragraph.
2. First-letter: it is effect in first letter of given paragraph.

For Example HTML File is :

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>krButani</title>
<style>
p.texts {
width:500px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:16px;
}
/* This is apply to first line */
p.texts:first-line {

Color:green;
font-size:24px;
}
/* This is a apply to first letter. */
p.texts:first-letter {

Color:red;
font-size:72px;

}
</style>
</head>

<body>
<p class="texts">
Premananda was a "vyakhyan-kar", a traveling storyteller,
who narrated his subject in song form and then perhaps elaborated on the lines in prose.
His style was so fluent that the long poems running into hundreds of lines were memorised by the people
and are still sung during the morning routines.
In this sense the oral tradition of the much more ancient Vedas was clearly continuing in India till late.
Premananda's famous poetry-stories deal with epic themes couched in stories of mythical kings, and the puranas.
He also wrote a drama based on Narasinh Mehta's life capturing his simplicity and his disregard for worldly divisions of caste and class.
</p>
</body>
</html>

Output is :

Comments

Popular posts from this blog

How to create a custom form in wordpress

My new Jquery Plugin name is krDailog