Using div to create quotation box : Quotation « CSS Controls « HTML / CSS






  1. HTML / CSS
  2. CSS Controls
  3. Quotation

Using div to create quotation box

 
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css" media="screen">
body {background: #C0FFEE; font: 1em Georgia, serif; padding: 1em 5%;}
.quotebox {font-size: 195%; padding: 80px 80px 40px; width: 16em; margin: 2em auto; border: 2px solid #8D7961; background: #FFF;}
.quotebox span {font-style: italic; font-size: smaller; display: block; margin-top: 0.5em; text-align: right;}

</style>
</head>
<body>

<div class="main">

<div class="quotebox">
One&#8217;s mind has a way of making itself up in the background, and it suddenly becomes clear what one means to do.
<span>&#8212;Arthur Christopher Benson</span>
</div>

</div>

</body>
</html>








Related examples in the same category

1.Text wraps quotations
2.Quotation style
3.Quotations
4.Quotation with quotation mark image
5.Sidebar with links, text and quotations
6.Quotation with background
7.Quotation with left bar
8.Quotation with quotation mark
9.Quotation Example
10.Using content property to add quotation marks to blockquote
11.Content and quotation
12.Quotation on the right, wrap with text
13.Paragraph wraps around quotation
14.Using classes and CSS overrides to create an alternate pull quote
15.Creating pull quotes in CSS
16.Quote with border