RSS

How To Style First Character Using CSS

05 Sep

In some of the news sites, or blog articles people give a different style to the first character of the article. It looks like this.

CSS First-Letter

CSS First-Letter

Here is how we achieve it. For demo purpose we have a paragraph with class “content”.

1
2
3
<p class=”content”>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet imperdiet orci, sit amet lobortis nunc. Praesent lacus ipsum, feugiat vitae quam a, ornare mollis neque. Aliquam id tempus orci. Ut accumsan justo id erat varius, a rutrum lacus semper. Vivamus fringilla vehicula libero, id iaculis urna cursus in. Nunc cursus orci mauris, eget tristique enim pharetra sit amet. Mauris mattis, sem quis tempor cursus, tortor libero posuere magna, eu luctus magna turpis et turpis. Suspendisse nec tempus felis, sed viverra sapien. Pellentesque fermentum tincidunt faucibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc arcu mi, mattis malesuada nibh eget, aliquam tincidunt nisl. Aliquam ullamcorper cursus diam sit amet fringilla. Etiam augue ante, rutrum at vulputate ut, tempor eu sem. Suspendisse quis dictum turpis. Fusce ac ipsum at neque posuere rutrum.
</p>

 

We are going to style it using CSS first-letter property.

1
2
3
4
5
6
7
8
9
10
.content{
    font-family: georgia, arial;
    font-size: 16px;
    color: #666;
    line-height: 30px;
}
.content::first-letter{
    font-size: 45px;
    color: #ff0000;
}

 

Advertisements
 
Leave a comment

Posted by on September 5, 2013 in CSS

 

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: