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>
------------------------------------------------------------------------
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
Resources
