Blockquote, Pullquote and Code

On Word­Press pow­ered web sites Block­quote and Code tags can help to edit posts in a more attrac­tive and dif­fer­en­ti­ated way. By Semi­oman­tics XO styles the block­quote as a “pul­lquote”; the dif­fer­ence between block and pul­lquote is that text wraps around pul­lquotes, while block­quotes keep empty space left or right of the blockquote.

Accord­ing to Wikipedia:

“In HTML and XHTML, the block­quote ele­ment defines a block quo­ta­tion within the text.”

The style of block­quotes is defined in the CSS style sheet. In Semi­oman­tics XO, you find the rel­e­vant entry under #leftcontent blockquote.

Mono­chrome Beige Tile by Yorgo Nestoridis

#leftcontent blockquote {
width: 250px;
font-size: 24px;
line-height: 26px;
float: right;
margin: 0 0 0 30px;
padding: 0;
font-style: italic;
}

#leftcontent blockquote p {
padding: 0;
margin: 0;
}

The style sheet defines the width of the box as well as some other style ele­ments. All para­me­ters can be eas­ily changed and oth­ers can be added, such as a back­ground color or image, a font fam­ily and more.

On this site we have added a back­ground in light gray #eaeaea as well as we have defined the font fam­ily. In order to insert some ver­ti­cal space after the block­quote, we have added a mar­gin of 20px at the bot­tom and decreased the left mar­gin from 30px to 20px.

The Block­quote in this site’s Style Sheet:
#leftcontent blockquote {
width: 400px;
background: #eaeaea;
font-size: 16px;
line-height: 18px;
float: right;
margin: 0 0 20px 20px;
padding: 5px;
font-style: italic;
font-family: 'trebuchet ms',
verdana, sans-serif; color: #000125;
}

Here is the code as used on this site.
You notice that this text wraps around the block­quote: for this rea­son we call this spe­cial case of block­quote a “pullquote”.

Note that the font style is italic for the block­quote con­tent, the code font style in red how­ever is normal.

Also, in view of the large col­umn width we increase the block­quote width to 400 pixels.

To dif­fer­en­ti­ate between the block­quote style and the code style, we need to define “code” in the style sheet. By default the Semi­oman­tics XO style sheet has no entry for “code”.

For this rea­son we just add a few lines of code after the block­quote def­i­n­i­tion in the style sheet.

Here is what I have entered for the pur­pose of this site:

#leftcontent code {
font-family: courier, monospace;
color: #b30000;
font-style: normal;
}


We define the font fam­ily and use namely mono­space fonts. Then we add color and we make sure the fonts will be in nor­mal style as opposed the italic style in the blockquote.

Accord­ing to Wikipedia:

“A pull quote (also known as a lift-out quote or a call-out) is a quo­ta­tion or edited from an arti­cle that is typ­i­cally placed in a larger type­face …” and accord­ing to wik­tionary: “… In news­pa­per and mag­a­zine pub­lish­ing, a brief excerpt drawn from an arti­cle and used out of context…”.

Semi­oman­tics XO uses the block­quote fea­ture by default as a pul­lquote. The dif­fer­ence is in the style: text wraps around pullquotes.

The above use and style of the pul­lquote is defined in func­tion of the use we make of this fea­ture: this web site fea­tures web design ele­ments and sam­ples and there­fore we focus first of all on text and text style.

Other appli­ca­tions entail other style def­i­n­i­tions. If you use the pul­lquote fea­ture mainly for fea­tur­ing images, you may style the pul­lquote as defined in one of our ear­lier posts HERE.

• block­quote design
• pull quote code
• pul­lquote code
• word­press block­quote code
• how to dif­fer­en­ti­ate pull quote
• block­quote designs for code
• block­quote code wordpress
• best block­quote designs
• html pul­lquote
• pull quote vs block quote

Related posts:

1. Web Design
2. Design Brand­ing
3. Web Design Work­shop 12 Block­quotes and Pullquotes
4. Web Design Title Fonts
5. Design

Tags: Blockquote, Code, CSS, Design, Design Workshop, Graphics Design, Pullquote, Sheet, Style, Web Design, Web Site Design, XO, Yorgo Nestoridis, Yorgo Nestoridis Design

This entry was posted on October 1, 2009 at 11:10 am and is filed under Design, Semiomantics, Web Design, WordPress. You can follow any responses to this entry through the RSS 2.0 feed.