Web Development Network  |  Sites:    Capital Tutorials    Internet Marketing Books    Arcade Games
Depiction- Webmaster Resources
Stock Image


Contributors: SSD VPS in Europe  |  SEO Las Vegas |  EsqRank

Dental SEO Marketing  |  Best Las Vegas SEO Company  |  Currency Converter Live

Misc Links: Submit Tutorials (Earn $$) l Advertising l Privacy Policy | Site Map

Tutorials > CSS > First Letter

 

Apply styles, such as increased size, to the first letter of a paragraph.


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: xx-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.

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.


 
 

Affiliates

All Graphic Design Photoshop Tutorials
Tutorial Man Wallpaper Stock  More

Resources