vBulletin Manual

Not to be confused with XSS, CSS stands for Cascading Style Sheets.

For the most part, vBulletin hides the nitty-gritty of editing CSS from you, instead presenting you with a user-friendly interface in the Style Manager in which to enter values to control the styling of your board. However, in the interest of a knowledge of what is going on behind the scenes in the vBulletin style system, we'll talk a little about CSS here.

CSS is a system designed to allow the style of a web site to be separated from the content itself.

Before CSS, web sites had to include HTML code defining how to display content along with the content itself. For example, to display a page of text using a bold, red, medium-sized font, it was necessary to include <font> tags in the actual content:

<p><font size="2" face="verdana, arial, helvetica, sans-serif" color="red">
    <b>This is my first paragraph.</b>
</font></p>

<p><font size="2" face="verdana, arial, helvetica, sans-serif" color="red">
    <b>This is my second paragraph.</b>
</font></p>

<p><font size="2" face="verdana, arial, helvetica, sans-serif" color="red">
    <b>This is my third paragraph.</b>
</font></p>

As is clearly demonstrated by the previous example, the HTML code has two problems. Firstly, the display code actually represents more HTML than the content itself, and secondly, it is necessary to repeat the same display code over and over.

The net result is HTML code that is bloated by display-related code. Worse still, if we decided at a later date that we wanted to change all the text on our site to use an italic, blue font rather than a bold, red font, we would have to edit the HTML code of every page on the site.

CSS allows us to get away from this far-from-ideal situation by allowing us to define style rules, known as classes.

We could set up a class wherein all content with the class applied would appear with our bold, red, medium-sized font. For now, we'll call this 'myclass'.

<p class="myclass">This is my first paragraph.</p>

<p class="myclass">This is my second paragraph.</p>

<p class="myclass">This is my third paragraph.</p>

You can see from this example that there is now significantly less HTML code needed, and that there is no inherent display-related code visible.

The CSS code that defines 'myclass' looks like this:

<style type="text/css">
<!--
.myclass
{
    font: bold 10pt verdana, arial, helvetica, sans-serif;
    color: red;
}
-->
</style>

With this system, were we to decide that we wanted to change all our text to use the italic, blue font, we would not need to edit our HTML content at all. Rather, we would simply change the style rules defined in 'myclass', and all the text with 'myclass' applied would automatically reflect the change.

Better still, the class definitions can be kept entirely separate from the HTML code by putting them into a .css file and linking to the file from each HTML page. Therefore, updating a single .css file can change the style of an entire web site, without having to edit a single HTML file.

To demonstrate the extent of use of CSS in vBulletin, here is a comparison of a page from the vBulletin.com web site shown with and without CSS.

A page from vbulletin.com shown with and without CSS applied

For a more complete discussion of exactly what CSS is, and how to use it, visit the following sites:

The following sections list and explain all the CSS classes and definitions used by vBulletin, so you can edit them with confidence, knowing exactly what they control, where to use them, and how your edits will affect the look of the system.