Defining classes using CSS

What's a class?

A class is best described as a self-contained set of formatting instructions which can be applied to one or more elements in markup - they are what a stylesheet is composed of, without classes there is no point having a stylesheet! There are several different ways to use classes

1. a generic class which can be applied to any element in the markup, best suited for use with generic formatting instructions that all elements will support, or for formatting instructions that need to be used on several types of element.
2. a specific class which can only be applied to a specific element in the markup, best suited for formatting instructions which are specific to only one type of element, allowing you to create different formatting instructions for different elements but reference them with the same name.
3. a redefinition of a specific base element in the markup, allowing you to re-style the basic formatting elements to be in-keeping with the theme of your site, saving you having to re-code large parts of the site simply to maintain the look and feel you desire.
4. as sub-class of an existing class, allowing you a very fine level of control while keeping structure simple - one of the more complex ways to create classes but given that it allows the resulting markup to be much simpler it is very often an effective measure.

Generic classes

This is the simplest class to start off with because it is not tied to any particular element, and so requires less thought before you attempt to implement it on your page.

The following is a what a generic class (which in this case selects a blue text color with a transparent background and has a 12 point font size) looks like:

.LargeBlueText {
  color: blue;
  background-color: transparent;
  font-size: 12pt;
}


The fact that it starts with a dot rather than an element name is what makes this a generic class, simply because we have not limited it to being used with just one type of element, hence it is generic.

Specific classes

This class is constructed the same way as a generic class with the obvious exception that when we define it we associate it with an elment, so implementing it requires a little thought to make sure you are attempting to use it with the correct element, as otherwise it will not assume this class.

The following is a what a specific class (which in this case selects a blue text color with a transparent background and has a 12 point font size) looks like:

span.LargeBlueText {
  color: blue;
  background-color: transparent;
  font-size: 12pt;
}


The fact that it starts with an element name rather than a dot is what makes this a specific class - in this case specifing that this class is only to be used with the span element and no others.

Redefining an element

This is not really a class, as it is not invoked in the same way - as you will see in a moment it is a little different to the previous examples in the way it is structured. For the most part this effect is used to change an elements appearance globally so that it fits in with the style you use rather than having to go to all the trouble of finding and replacing every instance of it with a custom class which does a similar thing.

The following is a what a redefined element (which in this case specifies instead of the default formatting the code tag should use grey bold text) looks like:

code {
  color: gray;
  background-color: transparent;
  font-weight: bold;
}


The fact that it uses only an element name for it's name makes this a redefinition - it will modify the code tag working from the default formatting, modifying those setting with the attributes we have selected. In use a redefined element requires no extra parameters to use these settings since they override it's defaults.

Classes and Sub-Classes

These are the most complex type of class available, they are best thought of as optional instructions which apply only within the parent class.

This allow you to create a minature set of styles that only apply within a specific area, which is more useful than you think for example - you have an element you have assigned a class to and within that element you use a series of classes to apply set formatting. Using a sub-class you could either limit the scope of those elements if you did not want them to be used elsewhere, or you could even temporarily redefine elements to save yourself much typing.

The following is a what a class and two of it's sub classes sub-class looks like:

.GreyText {
  color: gray;
  background-color: transparent;
}
.GreyText code {
  color: white;
  font-weight: bold;
}
.GreyText img.WhiteBorder {
  border-width: 5px;
  border-color: white;
  border-style: solid;
}


This starts off by creating a generic class which simply uses a grey text colour, then it creates a sub-class which redefines the code tag so that it appears as bold white text (you will note that a sub-class can be any type of class and is not limited to the same type as its parent, and it does not have to be a class it can also be a redefinition of an element), then finally it creates a class for an img which creates a white border around that tag.

As long as these classes are used inside the GreyText class then they will work, but outside of that class they will have no effect what-so-ever.

© evolved code
2000 - 2008