Caffeine

This next bunch of CSS style tips might look tricky but honestly there isn’t much to worry about. When you open up a magazine, quite often you see some pretty neat ways to draw your attention to a quote from the article itself; this is called a “pull quote” and using CSS you can do the same thing on your blog pages.

The jagged edge is intentional. This is using a right alignment. This is nothing more than a div with some styling and anyone can do this easily.

Copy the code below into your own blog and check it out. You can "float" your text "left" or "right", change the width of the overall quote, change its colours to match your page, align your text, pretty much anything you want to do.

<div style="float:right;width:150px;
margin-top:15px;
margin-bottom:15px;
margin-left:10px;
padding-bottom:10px;
font-family:Arial, Helvetica, Georgia;
font-size: 28px;
line-height:24px; 
color:#FF6600; 
text-align: right;">
<span style="color:gold;">...this will </span> 
look like some of the  <b>pullquotes or subtitles you see</b> in 
<span style="color:gold;">magazines</span>
</div>

Another style of "pull quote" is an inline box. Again there is nothing difficult about these they are nothing more than divs on your page.

Inline Pull Quotes
You don't have to define the pullquotes in the style sheet. The code is short and doesn't use too many keystrokes. It's just another paragraph in CSS.

As you can see, there is nothing tricky about this at all. The code itself is a single line and it really isn't necessary to include it into your user.css file. Same as above, you can adjust everything to match your page; its quick and easy to do. Go ahead, copy the code below and give it a try on your own page.

<p style="float:right;
width:30%;
padding:8px;border:1px solid blue;
font-size:10;
margin-top:10px;margin-bottom:15px;
margin-left:10px;
background-color:#1E1E1E;">

<strong>Inline Pull Quotes</strong><br> 
You don't have to define the pullquotes in the style sheet. It's just another paragraph in CSS. 
</p> 

Go ahead have fun and most of all experiment. If you aren't sure of your CSS skills and could use a little help then be sure to check out the CSS tutorials online at W3Schools.com Need a bit more to help you out, then visit Newsgator and download either the trial version of Top Style or the Lite version for free.