How to Join Classes with CSS

Introduction

If you're just learning how to use CSS and have examined multiple website tutorials, bought the latest books and plowed through the W3C Recommendations for Cascading Style Sheets you may not, as yet, have discovered this simple fact - it's possible to join up your classes. You aren't limited to having a single class in a tag. In fact, you're not limited to having just an id!

The W3C indicates that you can group selectors such as:

h1, h2, h3 {
  font-family: helvetica, sans-serif;
  }

and even group declarations:

h1 {
  font-weight: bold;
  font-size: 12pt;
  line-height: 14pt;
  font-family: verdana, sans-serif; /* always finish with a generic font */
  font-variant: normal;
  font-style: normal;
}

The above, incidentally can be shortened to:

h1 {
  font: bold 12pt/14pt verdana, sans-serif;
  }

BUT it's not obvious that you can have more than one class applied to your tags.

Method

As a demonstration, consider a simple web site that makes use of all the heading tags <h1> to <h6> and each tag can have a font color that is either red (#c00), blue (#00a) or black (#000), a font weight that is either normal or bold, a font style that is either normal or italic and finally, a font family that is either georgia or verdana.

To style all these variations with single classes you would need to use something like the following:

h1.rdnng, h2.rdnng, h3.rdnng, h4.rdnng, h5.rdnng, h6.rdnng {
  color:#c00; 
  font-weight:normal; 
  font-style:normal; 
  font-family:georgia, sans-serif;
  }
h1.blnng, h2.blnng, h3.blnng, h4.blnng, h5.blnng, h6.blnng {
  color:#00a; 
  font-weight:normal; 
  font-style:normal; 
  font-family:georgia, sans-serif;
  }
h1.bknng, h2.bknng, h3.bknng, h4.bknng, h5.bknng, h6.bknng {
  color:#000; 
  font-weight:normal; 
  font-style:normal; 
  font-family:georgia, sans-serif;
  }
h1.rdnng, h2.rdbng, h3.rdbng, h4.rdbng, h5.rdbng, h6.rdbng {
  color:#c00; 
  font-weight:bold; 
  font-style:normal; 
  font-family:georgia, sans-serif;
  }
h1.blnng, h2.blbng, h3.blbng, h4.blbng, h5.blbng, h6.blbng {
  color:#00a; 
  font-weight:bold; 
  font-style:normal; 
  font-family:georgia, sans-serif;
  }
h1.bknng, h2.bkbng, h3.bkbng, h4.bkbng, h5.bkbng, h6.bkbng {
  color:#000; 
  font-weight:bold; 
  font-style:normal; 
  font-family:georgia, sans-serif;
  }
h1.rdnig, h2.rdnig, h3.rdnig, h4.rdnig, h5.rdnig, h6.rdnig {
  color:#c00; 
  font-weight:normal; 
  font-style:italic; 
  font-family:georgia, sans-serif;
  }
h1.blnig, h2.blnig, h3.blnig, h4.blnig, h5.blnig, h6.blnig {
  color:#00a; 
  font-weight:normal; 
  font-style:italic; 
  font-family:georgia, sans-serif;
  }
h1.bknig, h2.bknig, h3.bknig, h4.bknig, h5.bknig, h6.bknig {
  color:#000; 
  font-weight:normal; 
  font-style:italic; 
  font-family:georgia, sans-serif;
  }
h1.rdbig, h2.rdbig, h3.rdbig, h4.rdbig, h5.rdbig, h6.rdbig {
  color:#c00; 
  font-weight:bold; 
  font-style:italic; 
  font-family:georgia, sans-serif;
  }
h1.blbig, h2.blbig, h3.blbig, h4.blbig, h5.blbig, h6.blbig {
  color:#00a; 
  font-weight:bold; 
  font-style:italic; 
  font-family:georgia, sans-serif;
  }
h1.bkbig, h2.bkbig, h3.bkbig, h4.bkbig, h5.bkbig, h6.bkbig {
  color:#000; 
  font-weight:bold; 
  font-style:italic; 
  font-family:georgia, sans-serif;
  }
h1.rdnnv, h2.rdnnv, h3.rdnnv, h4.rdnnv, h5.rdnnv, h6.rdnnv {
  color:#c00; 
  font-weight:normal; 
  font-style:normal; 
  font-family:verdana, sans-serif;
  }
h1.blnnv, h2.blnnv, h3.blnnv, h4.blnnv, h5.blnnv, h6.blnnv {
  color:#00a; 
  font-weight:normal; 
  font-style:normal; 
  font-family:verdana, sans-serif;
  }
h1.bknnv, h2.bknnv, h3.bknnv, h4.bknnv, h5.bknnv, h6.bknnv {
  color:#000; 
  font-weight:normal; 
  font-style:normal; 
  font-family:verdana, sans-serif;
  }
h1.rdbnv, h2.rdbnv, h3.rdbnv, h4.rdbnv, h5.rdbnv, h6.rdbnv {
  color:#c00; 
  font-weight:bold; 
  font-style:normal; 
  font-family:verdana, sans-serif;
  }
h1.blbnv, h2.blbnv, h3.blbnv, h4.blbnv, h5.blbnv, h6.blbnv {
  color:#00a; 
  font-weight:bold; 
  font-style:normal; 
  font-family:verdana, sans-serif;
  }
h1.bkbnv, h2.bkbnv, h3.bkbnv, h4.bkbnv, h5.bkbnv, h6.bkbnv {
  color:#000; 
  font-weight:bold; 
  font-style:normal; 
  font-family:verdana, sans-serif;
  }
h1.rdniv, h2.rdniv, h3.rdniv, h4.rdniv, h5.rdniv, h6.rdniv {
  color:#c00; 
  font-weight:normal; 
  font-style:italic; 
  font-family:verdana, sans-serif;
  }
h1.blniv, h2.blniv, h3.blniv, h4.blniv, h5.blniv, h6.blniv {
  color:#00a; 
  font-weight:normal; 
  font-style:italic; 
  font-family:verdana, sans-serif;
  }
h1.bkniv, h2.bkniv, h3.bkniv, h4.bkniv, h5.bkniv, h6.bkniv {
  color:#000; 
  font-weight:normal; 
  font-style:italic; 
  font-family:verdana, sans-serif;
  }
h1.rdbiv, h2.rdbiv, h3.rdbiv, h4.rdbiv, h5.rdbiv, h6.rdbiv {
  color:#c00; 
  font-weight:bold; 
  font-style:italic; 
  font-family:verdana, sans-serif;
  }
h1.blbiv, h2.blbiv, h3.blbiv, h4.blbiv, h5.blbiv, h6.blbiv {
  color:#00a; 
  font-weight:bold; 
  font-style:italic; 
  font-family:verdana, sans-serif;
  }
h1.bkbiv, h2.bkbiv, h3.bkbiv, h4.bkbiv, h5.bkbiv, h6.bkbiv {
  color:#000; 
  font-weight:bold; 
  font-style:italic; 
  font-family:verdana, sans-serif;
  }

You can see that this is a long and tedious way to style all the combinations.

Created: March 27, 2003
Revised: July 15, 2005

URL: https://webreference.com/programming/css_classes/1

How to Join Classes with CSS