35 August 24, 2007

A nice pullquote

I’m a pullquote, a snippet of content what I am doing is to catching your attention.

When you are writing something and intend to catching attention of readers, put a pullquote as a snippet of preview the content is getting popular on blogs/websites. Both pullquote & blockquote are widely uses on newspapers, magazines, NYtimes.com is an actual web-based media to taking look at them.

This article will show how to get a pullquote with CSS. Technically, pullquote is different from blockquote, it is not a HTML element, which means we should markup it in HTML with heading element such as <h4> or <h5> and we use CSS to define it in a way you want.

Here is markup:

<h4 class="pullquote">I'm a pullquote, a snippet of content.</h4>

and put the following to CSS file, those will control how it looks like:

.pullquote {
padding: 10px;
float: right;
width: 200px;
margin:10px 0 10px 10px;
border-top:2px solid #ffc300;
border-bottom:2px solid #ffc300;
text-align: center;
line-height: 22px;
font-family: georgia, verdana, Arial, Helvetica, sans-serif;
color:#ccc;}

It’s all done! A nice pullquote will work just fine with your content of website/blog, enjoy.

Tagged as: , ,
Posted in: Xhtml+CSS

Currently 35 comments, want to say something now?

Say something...