Easy CSS Inline Pullquote

It's as simple as this...

<p style="float:right;width:30%;padding:8px;border:1px solid black;font-size:.8em;margin:20px;background-color:whitesmoke;">

That's the code for the first pullquote here. Not much to it.

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

Pullquotes or sidebar style text blocks are easy to render with CSS Inline Style. You don't have to define the pull quotes in the style sheet. The code is short and doesn't take that many keystrokes. It's just another paragraph in CSS.

However, if you plan to use pullquotes repeatedly throughout your writings then defining your style of pullquotes in the External Style Sheet or in the HEAD section of your page may make sense. We don't mind typing the few extra keystrokes to get the pull-quote effect in CSS.

Background-color: whitesmoke is pleasant enough but being able to define the color on-the-fly is another reason to use Inline Style. We've changed the color of this particular pullquote several times by plugging in another color name.

...it depends on what we are highlighting or lowlighting...

Background-color:whitesmoke is pleasant enough but being able to define the color on-the-fly is another reason to use Inline Style. We've changed the color of this particular pullquote (or pull quote) several times by plugging in another color name.

Font-size:.8em; will always make our pullquote text a little smaller than our default text size. But sometimes we want the sidebar style or pullquote text to be smaller. It depends on what we are highlighting or lowlighting.

Font-size:1.5em; will always make our pullquote text size proportionately larger than our default text size. And that might be what we want. Really big text. Again, it depends on what we are highlighting or lowlighting. Do you think lowlighting is a word? It makes sense. If it isn't a word then it should be a word. Actually, you can tell that we aren't sure whether to use the word pullquote or "pull quote" so we used both. The typing here is simply to fill up space to show off the use of a pullquote or sidebar style text.

First Pull Quote

Copy and paste this in your Blog or Web page.

Second Pull Quote

Copy and paste this in your Blog or Web page.

Where you insert the paragraph is up to you. Start by putting the pullquote code in as the first paragraph. Then adjust as needed.

margin-top:15px; 
margin-left;20px; 
margin-bottom:15px; 
margin-right:30px;
 

Adjust the margins and the white space around the pullquote, to suit your style.

Small Magazine Style Pullquotes

Copy and paste this in your Blog or Web page.

It will look like this.