Multiple CSS Classes

Collapse
This topic is closed.
X
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • shapper
    #1

    Multiple CSS Classes

    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>Descriptio n</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
    Tags: None
    • Harlan Messinger
      #2
      Re: Multiple CSS Classes

      shapper wrote:
      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>Descriptio n</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?
      The multiple class approach may make sense, especially since it leaves
      you flexible to add another 30 message types without having to add
      selectors for them in your CSS (except for the properties that
      distinguish their treatment from other message types).

      But surely all your messages are contained within another element,
      whether DIV or UL or OL, so you can *really* just give this containing
      element class="MessageL ist" and use

      ul.MessageList h3 { /* props common to h3 in all message types */ }
      div.Error h3 { /* props specific to h3 in error messages */ }
      div.Warning h3 { /* etc. */ }

      This gives you the same advantage, without the disadvantage of having to
      add a Message class to each of your messages individually.

        Comment

        Previous template Next
        Working...