Multiple CSS Classes

Giganews Newsgroups
Subject: Multiple CSS Classes
Posted by:  shapper (mdmou…@gmail.com)
Date: Mon, 5 May 2008

Hello,

I am creating a message to display on my web sites. The HTML markup is
as follows:

<div class="Error">
  <h3>
    <img id="Icon" src="Images/Error_Icon.gif" alt="Icon"
style="border-width: 0px;">
    <span>Header</span>
  </h3>
  <p>Description</p>
</div>

And the CSS:

div.Error
{
  background-color: #FFD9D9;
  border: solid 1px #FF9595;
  padding: 0.4em;
  position: relative;
  min-height: 1.25em;
  width: 120px;
}
div.Error h3 {}
div.Error h3 img {vertical-align: middle;}
div.Error h3 span {color: #B30000; font: bold 1.0em Georgia, Geneva,
sans-serif;}
div.Error p {color: #B30000; font: normal 0.8em Arial, Geneva, sans-
serif;

I have 3 types of messages: Warning, Error and Success.

The only difference between the CSS of each message is the colors
properties.

Should I use a class named Message to define all common properties and
then 3 other classes: Error, Warning and success to define the color
properties:

<div class="Message Error">

Or should I use three different classes?

How is this usually done?

Any other advice on how I am building my message is welcome to.

Thanks,
Miguel

Replies