Style for blockquote and paragraph in a blockquote : blockquote « Tags « HTML / CSS






  1. HTML / CSS
  2. Tags
  3. blockquote

Style for blockquote and paragraph in a blockquote

   
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
blockquote {
 float: left;
 width: 200px;
 margin: 0 0.7em 0 0;
 padding: 0.7em;
 color: #666;
 background-color: black;
 font-size: 1.5em;
 font-style: italic;
 border-top: 1em solid #999;
 border-bottom: 1em solid #999;
}
blockquote p {
 margin: 0;
 padding: 0;
 text-align: left;
 line-height: 1.3em;
}
</style>
</head>

<body>
  <p>One</p>

  <blockquote>
    <p>Two</p>
  </blockquote>

  <p>three</p>

  <p>four</p>

  <p>file</p>
</body>
</html>








Related examples in the same category

1.blockquote tag
2.Set margin, padding and color for blockquote
3.Different background for blockquote and paragraph in a blockquote
4.border for blockquote
5.blockquote margin: 0;
6.blockquote padding: 0;
7.blockquote color: #555;
8.blockquote float: left;
9.blockquote width: 200px;
10.blockquote margin: 0 0.7em 0 0;
11.blockquote padding: 0.7em;
12.blockquote color: #666;
13.blockquote background-color: black;
14.blockquote font-family: Georgia, Times, "Times New Roman", serif;
15.blockquote font-size: 1.5em;
16.blockquote font-style: italic;
17.blockquote border-top: 1em solid #999;
18.blockquote border-bottom: 1em solid #999;
19.blockquote with image
20.blockquote background: url(img/menubg.gif) repeat-x bottom left #f4f4f4;
21.blockquote border-bottom: 1px solid #d8d8d8;
22.blockquote border-left: 4px solid #ccc;
23.blockquote border-right: 1px solid #d8d8d8;
24.blockquote border-top: 1px solid #d8d8d8;
25.blockquote color: #505050;
26.blockquote margin: 16px;
27.blockquote padding: 7px 7px 7px 11px;
28.blockquote font-weight: bold;
29.blockquote color: #B29B35;
30.Quotation layout
31.blockquote:before {content: open-quote;} blockquote:after {content: close-quote;}
32.'blockquote' Example