How to Join Classes with CSS

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!

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;
  }

Introduction

Method