Learn HTML step-by-step from A to Z or improve your professional skills.  Home HTML and CSS Tutorials First Letter
rss
Your Ad Here

First Letter

Author: Depiction.net More by this author
Added: Oct 21, 2004 Rating:   Level: Beginner Software: Dreamweaver FrontPage GoLive  

Styles can be added to the first letter of a paragraph of text much like you would find in magazines. To do this, Pseudo-elements, which add different effects to some selectors, or to a part of some selectors, are used.

Syntax

Code:

<style type="text/css">
selector.class:pseudo-element
{
property: value
}
</style>

To start off, add the following in the head section of you page.(between <head> and </head>)

Code:

<style type="text/css">
p.text:first-letter
{
font-size: x-large;
padding: 2px;
float: left;
}
</style>

Almost all CSS properties can be added in the brackets above. You are not restricted to the ones you will use in this tutorial.

First Letter
Applying the Style

Code:

<p class="text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet nulla id libero sagittis consectetuer. Ut ultricies sapien ut.</p>

In action:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris vestibulum posuere velit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla facilisi. Vivamus nonummy augue eu urna. Pellentesque porta odio eu enim. Nunc nulla orci, ullamcorper nec, congue eu, gravida.



Author's URL: Depiction.net
Thank you for voting.
Rate this Materials:
Bad 
1 2 3 4 5 Excellent
print this page subscribe to newsletter subscribe to rss

HTML is Hyper Text Markup Language that is used to make hypermedia and hypertext documents for the Web. More HTML and CSS: Most Popular Materials | Fresh Materials | More HTML Tutorials at Markuptutorials.com

Add comments to "First Letter"

Only registered users can write comment

No comments yet...