[ Show ]

Support VoyForums

[ Shrink ]

VoyForums Announcement: Programming and providing support for this service has been a labor of love since 1997. We are one of the few services online who values our users' privacy, and have never sold your information. We have even fought hard to defend your privacy in legal cases; however, we've done it with almost no financial support -- paying out of pocket to continue providing the service. Due to the issues imposed on us by advertisers, we also stopped hosting most ads on the forums many years ago. We hope you appreciate our efforts.

Show your support by donating any amount. (Note: We are still technically a for-profit company, so your contribution is not tax-deductible.) PayPal Acct: Feedback:

Donate to VoyForums (PayPal):

What is it?
Different names for the same thing. Style Sheets are a way of setting the styles, looks, and sometimes behavior, of a webpage. They can affect things like font size, colors, margins, background images, etc. They can be conveniently placed in one location of a page or site, yet apply to many locations--this allows easier organization and management of page-style in a convenient location, but still affecting settings globally (on a page, site, or even across websites). It also is extremely useful in that it minimizes the amount of changes one must make if they wish to change something in their design. Style Sheet features/definitions allow a lot of control over many features of page design.

Using them wisely:
Not all browsers support style sheets, nor handle features the same, and some allow the user to conveniently turn them on or off. It is therefore recommended to design a page so that it is usable without the style sheet; that is, using the style sheet as an "extra", and not something the page relies on.

An example use:
Maybe you have a webpage with many sections, and each has a title that you want to look a certain way. Without style sheets you would usually have to set the looks for each and every title--and if you wanted to make a change to the looks later, you would have to go and make that change, again, at each and every title. With a style sheet, one can place all their settings in one location, and then each title can refer to that style sheet "class"--later, making one change to that class's style would affect all the titles in the page.

The basic style sheet setting

• Rules/statements/selectors: A rule specifies some settings grouped into a name, called a selector. Usually the name is the name of a tag (like P for paragraph tags, H1 for headers, etc.); however, they can also be multiple selectors, separated by some space (whitespace), in order to affect only selectors within selectors. A basic rule looks something like this: selector { property: value }
  It can also include a name which can be referred to by other tags later in the page. Properties are the specific attributes which this tag can be affected by (like font color, background, borders, etc.) and the appropriate values. Not all tags accept the same properties, and each property takes its own type of value. For example, you might use: td {font-size: 12pt; background: black; color: white}   It is not appropriate to place the 12pt fontsize as a background color, nor a color for the font-size.

  Make sure to pay close attention to the characters used. You cannot substitute parentheses () for the curly braces {}, nor the semi-colons ; for colons! The rules are always a selector name followed by some space followed by the settings in curly braces. Settings are always a property name separated from a value by a colon :   and you can separate multiple property:value's from each other with a semicolon, as in the above example.

  Another example is: td ul { settings_here }   This example affects only UL tags found within TD (table cells). Later we will see some more ways of using the selectors for more control and capability.

How are they used?
Rules, as seen above, can be put into a style sheet one after another. With webpages, style sheets can be used in a few ways: Rules in their own file, rules together in a webpage, and rules placed in various locations of a webpage.

1. Rules in a style sheet file: Style Sheet rules can be placed into a single file and then called using the html code: <link rel=style sheet class="text/css" href="style.css">. The href= can point to a full URL as well as a partial URL (called a URI).

   You can include other settings in the link-tag as well, and there are vast numbers of pages on the web covering all the details. One that we'll mention here is media attribute of the link tag. It specified the output-form that the style sheet affects. By default, style sheets affect the "screen" by default, but the media attribute can be set, for instance, to media="screen,print", in order to affect the screen display, and also the output when the document is printed. Media values are: screen, print, aural (speech synthesizers), projection (for projectors), braille, tty (character displays), tv, all (all output devices).

2. Rules together in a single page: You can place style sheet settings/properties right into an HTML page within the head section. Ex:

    <head><style type="text/css"><!-- 
    style sheet-rule1
    style sheet-rule2
    ...
    //--></style></head>

   Later, individual locations of the page can refer to these rules, thereby using their settings if the browser supports it. See the above example of the td tag. Alternately, one can give the rule a name like td.name, and in a certain TD tag in the page, specify <td class=name>. In VoyForums, we use rules like: .chd{background-color: black}

   Here is an example style sheet VoyForums might use at the top of a forum:

   .cb{background-color:#000000}
   .chd{background-color:#660099;font-family:arial;color:#ffffff}
   .c1{background-color:#a9bfff;color:#330099}
   .c2{background-color:#d8e4ff;color:#330099}
   .cp{background-color:#a9bfff;color:#330099}

   Later, we would use the chd rule to set the header cells of messages like this:
   <tr class=chd><td>Subject</td><td>Author</td>...</tr> This "calls" the settings from the "chd" rule.

3. Individual locations: There are several ways of using style sheet rules in a webpage. One is to call an already-loaded style sheet, as you see with the class=rulename usage above, another similar method is to name your rule beginning with a # (pound) sign. For example: #myrule1 {...}. Later, you would refer to this setting similar to class=... but instead, using id=myrule1   The difference being that the ID method is designed for just a one-time usage of that rule in a page, and this brings us to the next way of using style sheet rules...

   Because style sheet rules allow such a convenient and powerful way of controlling settings, it might sometimes be convenient to place the rules directly in the tag or area you want to affect. In the same way you can call class=rulename from pretty much any tag, you can also place style="rules" right into a tag. For example, you might want to use <p style="color:#000099; font-family: small serif">   This would set this single paragraph to a blue-ish font in a small font of the viewer's web-browser's choice, like a small Times font.

How VoyForums uses Style Sheets
For a while we avoided the use of Style Sheets because they were not used by many of our visitors webbrowsers--we attempt to implement what we want using what is available to the most number of people. We do not feel we should cut out a portion of the population just for "style" or "looks". However, now that many years have passed and style sheet support will be available in almost everyone's browser, we have implemented a way of using style sheets in forums. The purpose for using them is not only for the control they allow over forum looks, but also because it is a more-efficient way of setting the page-display features--saving all of our bandwidth, time, and resources, at the same time as allowing capabilities and control to our forum admins which they had not had before.

The easiest way to use Style Sheets is to select a theme. You need not know anything about HTML or CSS/Style Sheets to do so. We recommend reading our version 2.7 upgrade information and help page for some of the details on using CSS yourself, with your forum. We do recommend, for even advanced users, selecting a theme in order to see how we use style sheets with forums. We recommend the following steps:

1. Save your Forum Settings
2. Select one of our themes--specifically a "tables" theme, which uses style sheets more-fully than the text-themes.
3. View your forum and the CSS area of the admin-menu
4. You can then restore your settings, if you wish, or just customize your forum the way you want.

[ Back to Help Desk ]