Newbie css question

I have a css class defined as -

.post-note {
  background-color: #FFE9BF;
  padding: 5px; margin-top: 20px;
  font-size: 1.1em;
  border: 1px solid #996400;
  clear:both;
}

Code (markup):

I use the above class as -

<p class="post-note">Text</p>

Code (markup):

This works fine and gives my text left-justified. Now my problem is that only for one paragraph I want to use this class but the text should be centered. How do I do this without writing another class?

All help appreciated.

 

Add a style attribute to the paragraph you would like to be centered, i.e.:

<p class="post-note" style="text-align:center;">Text</p>

Code (markup):

 

this would be the best solution other than making a separate class with center property...

 

Simple solutions to 'complex' problems!! Thanks.
It works as can be seen at the bottom of this page.

 

To save on the extra code adding align center would add to every page i would do it this way around.

.post-note {
  background-color: #FFE9BF;
  text-align:center;
  padding: 5px; margin-top: 20px;
  font-size: 1.1em;
  border: 1px solid #996400;
  clear:both;
}

Code (markup):

<p class="post-note" style="text-align:left;">Text</p>

Code (markup):

 

Honestly, I'd have to ask how many paragraphs are you assiging .post-note to? Usually you should only be using classes for the ones that are DIFFERENT from the rest inside their 'block'...

In either case, inlining CSS is BAD practice - defeating the whole point of separating presentation from content.

I'd be looking at something like

<div class="post-notesection">
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p class="standout">Test</p>
  <p>Test</p>
</div>

Code (markup):

with the css:

.post-notesection p {
  background-color: #FFE9BF;
  padding: 5px; margin-top: 20px;
  font-size: 1.1em;
  border: 1px solid #996400;
  clear:both;
}

.standout {
  text-align:center;
}

Code (markup):

Though I'd have to see your whole code (or a demo of it) to be sure...

 

I am a bit confused on hot to use your suggestion. If you see this page, the last block (there are three on this page) has centered text using inline CSS. What changes do I need to do to my css, to avoid inline style?

 

Okay it now works without using inline style -

css is -

.post-note {
  background-color: #FFE9BF;
  padding: 5px; margin-top: 20px;
  font-size: 1.1em;
  border: 1px solid #996400;
  clear:both; /* suggested at Site-Point */
}
.align-center { text-align: center; }

Code (markup):

Usage is -

<p class="post-note align-center">Text</p>

Code (markup):