style your first letter using css

Posted by on Friday, November 26, 2010 · Leave a Comment 

Now you can style the first letter and first line the css .

For styling first letter

CSS :first-letter pseudo-element

<html>
<head>
<style type=”text/css”>
p:first-letter
{
color:#ff0000;
font-size:xx-large;
}
</style>
</head>

<body>
<p>This is a text.</p>
</body>
</html>

When can this be useful?

This can be useful for styling the first letter of an parragraph .

CSS :first-line pseudo-element

<html>
<head>
<style type=”text/css”>
p:first-line
{
color:#ff0000;
font-variant:small-caps;
}
</style>
</head>

<body>
<p>You can use the :first-line pseudo-element to add a special effect to the first line of a text.</p>
</body>
</html>

When can this be useful?

Again this can be useful in the starting line of the parragraph or webpage.

Checkout this awesome tutorial on creating a book style effect using css

http://www.cssnewbie.com/book-style-chapter-intros/

Find Out More >> http://www.w3schools.com/CSS/pr_pseudo_first-letter.asp

http://www.w3schools.com/Css/pr_pseudo_first-line.asp

Filed under HTML / CSS · Tagged with