How to Join Classes with CSS | 2

How to Join Classes with CSS

The (x)html could be written as below:

<h1 class="rdnng">h1 Red normal normal georgia</h1>
<h2 class="blnng">h2 Blue normal normal georgia</h2>
<h3 class="bknng">h3 Black normal normal georgia</h3>
<h4 class="rdbng">h4 Red bold normal georgia</h4>
<h5 class="blbng">h5 Blue bold normal georgia</h5>
<h6 class="bkbng">h6 Black bold normal georgia</h6>
<h1 class="rdnig">h1 Red normal italic georgia</h1>
<h2 class="blnig">h2 Blue normal italic georgia</h2>
<h3 class="bknig">h3 Black normal italic georgia</h3>
<h4 class="rdbig">h4 Red bold italic georgia</h4>
<h5 class="blbig">h5 Blue bold italic georgia</h5>
<h6 class="bkbig">h6 Black bold italic georgia</h6>
<h1 class="rdnnv">h1 Red normal normal verdana</h1>
<h2 class="blnnv">h2 Blue normal normal verdana</h2>
<h3 class="bknnv">h3 Black normal normal verdana</3>
<h4 class="rdbnv">h4 Red bold normal verdana</h4>
<h5 class="blbnv">h5 Blue bold normal verdana</h5>
<h6 class="bkbnv">h6 Black bold normal verdana</h6>
<h1 class="rdniv">h1 Red normal italic verdana</h1>
<h2 class="blniv">h2 Blue normal italic verdana</h2>
<h3 class="bkniv">h3 Black normal italic verdana</h3>
<h4 class="rdbiv">h4 Red bold italic verdana</h4>
<h5 class="blbiv">h5 Blue bold italic verdana</h5>
<h6 class="bkbiv">h6 Black bold italic verdana</h6>

The above may be repeated for any combination of <h1> to <h6>

As you can see, this takes a lot of styling and some sort of coding to keep track of which style does what.

The above source code will look like this:

EXAMPLE ONE

The simpler way

Combining classes

If we create separate classes for the color, normal/bold weight, normal/italic style and georgia/verdana font we can cut the CSS down to just a few lines.

.red {color:#c00;}
.blu {color:#00a;}
.bla {color:#000;}
.wnorm {font-weight:normal;}
.wbold {font-weight:bold;}
.snorm {font-style:normal;}
.sital {font-style:italic;}
.geo {font-family:georgia, sans-serif;}
.ver {font-family:verdana, sans-serif;}

This is now much smaller and easier to follow.

The (x)html will now be a case of combining the classes above to produce the required style:

<h1 class="red wnorm snorm geo">h1 Red normal normal georgia</h1>
<h2 class="blu wnorm snorm geo">h2 Blue normal normal georgia</h2>
<h3 class="bla wnorm snorm geo">h3 Black normal normal georgia</h3>
<h4 class="red wbold snorm geo">h4 Red bold normal georgia</h4>
<h5 class="blu wbold snorm geo">h5 Blue bold normal georgia</h5>
<h6 class="bla wbold snorm geo">h6 Black bold normal georgia</h6>
<h1 class="red wnorm sital geo">h1 Red normal italic georgia</h1>
<h2 class="blu wnorm sital geo">h2 Blue normal italic georgia</h2>
<h3 class="bla wnorm sital geo">h3 Black normal italic georgia</h3>
<h4 class="red wbold sital geo">h4 Red bold italic georgia</h4>
<h5 class="blu wbold sital geo">h5 Blue bold italic georgia</h5>
<h6 class="bla wbold sital geo">h6 Black bold italic georgia</h6>
<h1 class="red wnorm snorm ver">h1 Red normal normal verdana</h1>
<h2 class="blu wnorm snorm ver">h2 Blue normal normal verdana</h2>
<h3 class="bla wnorm snorm ver">h3 Black normal normal verdana</h3>
<h4 class="red wbold snorm ver">h4 Red bold normal verdana</h4>
<h5 class="blu wbold snorm ver">h5 Blue bold normal verdana</h5>
<h6 class="bla wbold snorm ver">h6 Black bold normal verdana</h6>
<h1 class="red wnorm sital ver">h1 Red normal italic verdana</h1>
<h2 class="blu wnorm sital ver">h2 Blue normal italic verdana</h2>
<h3 class="bla wnorm sital ver">h3 Black normal italic verdana</h3>
<h4 class="red wbold sital ver">h4 Red bold italic verdana</h4>
<h5 class="blu wbold sital ver">h5 Blue bold italic verdana</h5>
<h6 class="bla wbold sital ver">h6 Black bold italic verdana</h6>

The above source code will be exactly the same as the previous example:

EXAMPLE TWO

Additionally, these styles can also be applied to other elements on your page, <p> and <span> for instance.

Adding class to ids

You may have discovered that you can use id attributes to have a unique value over your document targeting just one particular element, but did you know that this can also have class style(s)?

For instance, in our example page above, let's say that we want to create a 'special' h1 heading using Trebuchet MS font, 3em high, with italics and normal weight, we could use the following id style...

#tms {
  font-family:"trebuchet ms", sans-serif; 
  font-size:3em;
  }

...and combine it with the classes .wnorm and .sital.

The (x)html will now be a case of combining the id and classes to produce the required style.

<h1 id="tms" class="wnorm sital">3em high normal weight italic Trebuchet MS</h1>

The above source code will look like this:

EXAMPLE THREE

Conclusion

This method of combining classes is not limited to just text; it can be applied to everything from floats to borders and margins. It might not be necessary in the majority of cases, but there will be some situations where it will save you a lot of typing, coding and will make your style sheet easier to handle.

About the Author

Stu's website documents his attempts at understanding and exploring the possibilities of CSS. From standard navigation links to his more bizarre experimental techniques. All of his examples are produced with JUST CSS--no javascript, or any other language, has been used in any of the examples. [Editor's note: Prepare to be amazed!] http://www.stunicholls.myby.co.uk/

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

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

How to Join Classes with CSS | 2