Cannot get a 2nd blockquote working in CSS - please help

Question

hi - hope someone can help.  I have a blockquote set up.  the css is the following:
blockquote,
q,
quote {
  background: #ece5d0 url(../images/quote.png) no-repeat;
  font-family: "Times New Roman", Times, serif;
  font-size: 18px;
  font-style: italic;
  width: 804px;
  margin: 5px 0;
  padding: 10px 10px 10px 47px;
  quotes: none;
  line-height: 25px;
  border-radius: 10px;
  box-shadow: 5px 5px 5px #bababa;
Here is a picture to see what it looks like:
So I need to make a block quote elsewhere on the site but in a narrower area because the above will be cut off.  So I thought I could just copy the code and make a new one and modify it:
#blockquote2, q, quote {
  background: #ece5d0 url(../images/quote.png) no-repeat;
  font-family: "Times New Roman", Times, serif;
  font-size: 18px;
  font-style: italic;
  width: 620px;
  margin: 5px 0;
  padding: 10px 10px 10px 47px;
  quotes: none;
  line-height: 25px;
  border-radius: 10px;
  box-shadow: 5px 5px 5px #bababa;
I first tried "blockquote2" without a DIV like "<blockquote2> and that did not work so I then made it a DIV like above and it still does not work.  Here's a result of it (no quote styling like above):
As you'll see the width (620) is important to fit into the column.    Here is the code i'm putting onto the page to try to create the quote:
<div id="blockquote2"><br /><p align="left">NOAA’s mission touches the lives of every American and we are proud of our role in protecting life and property and conserving and protecting natural resources. I hope you will explore NOAA and how our products and services can enrich your own life.</p>
<p align="right"><strong>Dr. Kathryn Sullivan, NOAA Administrator         </strong></p></div>
But anyway, can someone tell me why this isn't working and offer a fix?  Any help is appreciated.  thanks.

Answer 1

What I would do is, rather than creating an id for the second kind of blockquote, use a class that only changes the width and other attributes you want changed from the base blockquote element...
Somewhere after your current blockquote css...
blockquote.classname {
     attribute:value;
     attribute:value;
Then in the html, you'd still use a standard blockquote element, with a class...
<blockquote class="classname">
     content
</blockquote>
You could use an ID too, but id's can only be used once on a given page, so a class is better if there might be multiple uses.