HTML blockquote styling
From the simplest to the most sophisticated, make quotations with style!
Compatibility: This CSS code works perfectly with all browsers including Internet Explorer since version 8. For earlier versions of IE, the rendering is degraded, but the content remains functional.
The code described in each example, as it is, applies to all tags on the site, or pages involved in the stylesheet. But in the source code of this page we use instead classes in order to present all the different styles together.
If your site uses blockquote tags for anything other than citations, for example to shift the text, which is not a recommended practice, you must instead use a style rule such as:
.offset
{
margin: 16px 32px 16px 32px;
} Simple style
The easiest way to style the blockquote tag: it consists in applying a shift, put the text in italics, and change the font.
And here's an example ...
blockquote
{
font-style: italic;
margin-left: 32px;
font-family: Georgia, "Times New Roman", serif;
}And demonstration:
I object to people running down the future. I am going to live all the rest of my life there.
- Charles Kettering.
Vertical bar
We can still put more emphasis on the fact whether it is a quotation with a vertical bar...
blockquote
{
font-style: normal;
font-size: 16px;
margin-left: 32px;
font-family: Consolas, "Times New Roman", Verdana;
border-left: 4px solid #CCC;
padding-left: 8px;
}#CCC code corresponds to the gray color. Of course you can choose any color, for example: #900 for red, # 09C for turquoise, # 090 for green, etc. ...
And occasionally we try a different font, the Consolas.
The result:
If you need a helping hand, you have two at ends of the arms.
- Jules Renard.
Use of an image
And if we added a little fantasy? For this we will use an image. Again, we try a different font.
The principle - very classic - is to use the image as a background for the tag, without repetition, and to shift the text inside the tag to show the image, with the property padding-left.
blockquote
{
font-style:normal;
margin-left:32px;
font-family:"Segoe Print", "Times New Roman", Verdana;
padding-left: 48px;
background:url('/css/images/blockquote.png');
background-repeat:no-repeat;
min-height: 30px;
}Socialism never took root in America because the poor see themselves not as an exploited proletariat but as temporarily embarrassed millionaires.
- John Steinbeck.
Applying the same principle we can also create a comic bubble...
Speech bubble
This time we must add an extra tag to display the tail of the bubble, because it has a border but the border should be interrupted in front of the tail.
To achieve this, we draw the tail on the left of the bubble, but with a overlapping of two pixels, so it erase a part of the border and there is a single stroke for the bubble and the tail.
The float:left property ensures that the tail is positioned to the left of the bubble.
The z-index property ensures that the tail is placed above the bubble.
<div class="bubble"></div>
<blockquote>
</blockquote>
blockquote
margin-left:46px;
font-family:"Segoe Print", "Times New Roman", Verdana;
padding: 8px;
min-height: 44px;
border:2px solid black;
border-radius:6px;
z-index:1;
}
.bubble
{
background: url('/css/images/bubble.png') no-repeat;
margin:16px 0 0 0;
width:48px;
height:20px;
padding:0;
position:relative;
z-index:10;
float:left;
}Download the picture of the tail.
I do not want to foresee the future. I am concerned with taking care of the present. God has given me no control over the moment following.
- Gandhi.
Quote next to the image of the author
The citation will be placed next to the photo of the author. The image has the property float: left.
Giving the quote the shape of a speech bubble adds an additional difficulty: the left margin of the bubble must be modified to take into account the width of the photo of the author. It is thus appropriate for all photos used in this context to be resized to have had the same width in accordance with the margin set in the stylesheet of the bubble.
We may possibly circumvent this by placing the tail and the bubble inside a new layer ...
<img src="images/victor-hugo.jpg" width="124" height="150" class="author" />
<div class="bubble"></div>
<blockquote></blockquote>.bubbleimg
{
float:left;
clear:both;
}
blockquote
{
margin-left:170px;
font-family:"Segoe Print", "Times New Roman", Verdana;
padding: 8px;
min-height: 44px;
border:2px solid black;
border-radius:6px;
z-index:1;
}
.bubble
{
background: url('/css/images/bubble.png') no-repeat;
margin:16px 0 0 0px;
width:48px;
height:20px;
padding:0;
position:relative;
z-index:10;
float:left;
}
The future, ghost with empty hands, that promises everything and has nothing!
From some profound words every man is a disciple.
The water which does not run makes a swamp, the spirit who does not work makes a fool.
Quotes from Victor Hugo.
Using CSS 3: Optimal solution
In this case the effect of representing a speech bubble disappears on older browsers, but the presentation is acceptable. On IE7, for example, we have the quote in a rectangle next to the image of the author. The speech bubble works with IE8.
This is actually the best choice because the effect is rendered with a simple <blockquotes> tag, we do not need to add the image of the hook in the page as in the previous case.
<img src="images/ray-bradbury.jpg" width="124" height="147" class="author" />
<blockquote></blockquote>
The difference in the code is in the use of : after pseudo-class allowing two CSS rules to link between them. The content property is also required.
.author
{
float:left;
clear:both;
}
blockquote
{
position:relative;
font-family:"Segoe Print", "Times New Roman", Verdana;
padding:8px;
margin:8px 8px 8px 180px;
color:black;
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
background:white;
border:2px solid black;
min-height:64px;
}
blockquote:after
{
content:"";
position:absolute;
left:-48px;
display:block;
top:48px;
background: url('https://www.xul.fr/css/images/bubble.png') no-repeat;
width:48px;
height:20px;
padding:0;
}
I remember going to a party in New York about 35 years ago. They all called me Buck Rogers and Flash Gordon. I said, "Your phone number, please."
- Why are you talking our phone number?
- Because the night we land on the moon, you are going to be called.
Ray Bradbury, sci-fi author.