Basic css
Free Geek's web site uses css (cascading style sheets) for formatting. Most modern web sites do.
Our basic style sheet can be found at http://freegeek.org/freegeek.css - it provides the formatting instructions for all of pages on our main web site.
Whaddya mean, cascade?
Style sheets are called "cascading" because you can have several levels of specificity. The lowest level is using CSS to put a style on a particular element (like a <p> or <div>) within a page. This is called inline style, and we don't do that much. Here's an example:
<H1 style="color:papayawhip;">Papayawhip?!?</H1>
A page can also have a style sheet within the header. This is called internal css. You can define a style to be applied to each instance of a particular element (each line item, each <strong> segment):
ul { margin: 0px 0px 0px 30px; }
- every unordered list (<ul>) on that page would use this formatting.You can also make a named class that can be assigned to only specific items. That might look like this:
table.aside {
background-color: ffffff
}
where this formatting would only be used on tables that started out <table class="aside">
We use external css - meaning that the style definitions are all defined in a separate document, linked to above. Within that document, they are done just the same way as in internal style sheets. The benefit to using external css is that changes can be made to the entire web site at once, instead of editing each and every page. If we decide to change our colors from white, gold, black and red to papayawhip, orchid, and saddle brown, changing the style sheet will do it through the whole website (except for images.. ick). Each page is linked to the external stylesheet with one line in the page's header - which, on our web pages, are part of the include, so you won't even see that.
The cascading comes in because you can use all of these techniques simultaneously in the same page. The more specific the style, the more importance placed on it. So if your external stylesheet says that an H2 should be 14-point, blue, and bold, your internal stylesheet says it should be italicized and purple, and the inline style says it should be 12-point, green and underlined - that h2 will be bold, italicized, underlined, 12-point, and green. We try to stick with just the one stylesheet, and i'm sure you can see why.
Using the stylesheet
If the elements are all styled nicely and you use them as intended (like the header tags), you often won't have to think about using the stylesheet at all. But if you are, for example, adding a section header like we used on the staff page, you could use the "section" class that's defined in our stylesheet by typing
<div class="section"><strong>Jake</strong><br><em>Tennis Ball Coordinator</em></div>
Please use the styles already created whenever possible, instead of creating new ones. This is how stylesheets help us keep our formatting consistent and professional-looking. (We'll leave aside the question of whether a professional-looking website is really representative of the organization.)
If you do need to add a new style to our stylesheet, please keep in mind the rest of the webmins and comment on it.
/* a comment in a stylesheet looks like this */
In the comment, mention what it's for, logically, in a page - so they know if and for what they should use it - and if it's not obvious, what it does.
To find out what characteristics you can manipulate for a given element, the W3C recommendation for CSS 1 is useful. Honestly, i usually just google, or look at the source if i find an example of something i wonder about.